Question

我使用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>

为响应网址/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');
}

我错过了什么？

Answer 1

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

命名视图：

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

未命名视图定位（此处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：要在评论中得到答案：＆＃34; ...其他视图根本没有填充。如何告诉$state.go( )填充哪个视图？＆＃34;

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

这意味着，我们应该拥有像＆＃34;详细信息和＃34;状态

//.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置于所需状态

1 个答案: