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

Question

我正在使用 angular-ui-router 创建两个嵌套视图（一个图表和一个 table），但无法将任何内容渲染到这些嵌套视图中。这是我在 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()，我也无法将任何内容推送到图表和 table 视图中。这是我的路由器配置：

$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() 将图表和 table 推送到子视图的尝试：

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');
}

我错过了什么？

Answer 1

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

命名的视图：

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

未命名视图定位（此处UI-路由器无法在上述代码段中找到未命名视图：

.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( ) 要填充哪个视图？”

我们可以使用状态导航来改变状态（和他们的观点），而不仅仅是观点。换句话说，state 在这种情况下，应该填充两个视图（我会说）。

这意味着，我们应该有类似 "details" 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'
       }
     }
})

总结：如果我们需要填充两个视图，我们可以通过父子来完成（父填充一个，子填充第二个）或者一个状态应该填充两个

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

AngularUI Router - Unable to put ui-view into the desired state

angularjs

angular-ui-router