AngularUI路由器 - 无法将ui-view置于所需状态-Java 学习之路

我使用angular-ui-router创建两个嵌套视图（图表和表），但无法将任何内容渲染到这些嵌套视图中 . 以下是我在index.html中的顶级视图：

<body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
</body>

这是我在dashboard.html中的嵌套视图：

<section class="dashboard">
    <h2>Dashboard</h2>
    <div ui-view="chart"></div>
    <div ui-view="table"></div>
</section>

为了响应url /dashboard ，路由器正在将dashboard.html正确地推送到index.html的 content 视图中 . 但是，即使使用 $state.go() ，我也无法将任何内容推送到图表和表格视图中 . 这是我的路由器配置：

$stateProvider
    .state('app',{
        url: '/',
        views: {
            'header': {
                templateUrl: 'templates/header.html'
            },
            'content': {
                templateUrl: 'templates/content.html'
            }
        }
    })

    .state('app.dashboard', {
        url: 'dashboard',
        views: {
            'content@': {
                templateUrl: 'dashboard/dashboard.html',
                controller: 'DashboardController'
            }
        }

    })

    .state('app.dashboard.chart', {
        templateUrl: 'dashboard/chart/chart.html'
    })

    .state('app.dashboard.table', {
        templateUrl: 'dashboard/table/table.html'
    });

这是我尝试使用DashboardController中的 $state.go() 将图表和表格推送到子视图中：

angular.module('app.dashboard', ['ui.router']);

angular
    .module('app.dashboard')
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['$state'];

/* ----- DashboardController ----- */
function DashboardController($state) {
    var vm = this;
    vm.title = 'Dashboard';
    $state.go('app.dashboard.chart');
    $state.go('app.dashboard.table');
}

我错过了什么？

1 回答

问题出在命名视图与未命名状态视图定义中：

named 视图：

<section class="dashboard">
    <h2>Dashboard</h2>
    <div ui-view="chart"></div>
    <div ui-view="table"></div>
</section>

unnamed 视图定位（此处UI-Router无法在上面的代码段中找到未命名的视图：

.state('app.dashboard.chart', {
    templateUrl: 'dashboard/chart/chart.html'
})

我们也需要使用视图名称，即使在状态def：

.state('app.dashboard.chart', {
    views: {
      // this view belongs into 'chart' target of its parent
      'chart' : {
        templateUrl: 'dashboard/chart/chart.html'
       }
     }
})

EXTEND：要在评论中得到答案：“......其他视图根本没有填充 . 如何告诉 $state.go( ) 填充哪个视图？”

我们可以使用状态导航来更改 states （及其视图），而不仅仅是视图 . 换句话说，在这种情况下， state 应该填充两个视图（我会说） .

这意味着，我们应该拥有类似“细节”状态的东西

//.state('app.dashboard.chart', {
.state('app.dashboard.details', {
    views: {
      // this view belongs into 'chart' target of its parent
      'chart' : {
        templateUrl: 'dashboard/chart/chart.html'
       },
      'table' : {
        templateUrl: 'dashboard/table/table.html'
       }
     }
})

或者我们可以介绍亲子

.state('app.dashboard.chart', {
    views: {
      'chart' : {
        templateUrl: 'dashboard/chart/chart.html'
       },
       // could be even some default for 'table' as well here
     }
})


.state('app.dashboard.chart.table', {
    views: {
      // when inside of a chart, we can go to table to fill even table view
      'table@app.dashboard' : {
        templateUrl: 'dashboard/table/table.html'
       }
     }
})

摘要：如果我们需要填充两个视图，我们可以通过父子进行（父进程填充一个，子进程填充第二个）或者一个状态应该填充两个

回复于 2024-05-20T10:06:35+08:00

AngularUI路由器 - 无法将ui-view置于所需状态

1 回答

相关问题