Angular UI路由器嵌套视图问题

Question

我在讨论Angular UI路由器嵌套视图的工作方式时遇到了一些问题。

我的$ stateProvider看起来像这样：

$stateProvider
.state('login', {
  url: "/login",
  views: {
    'main': {
        templateUrl: "static/templates/login.html",
        controller: 'LoginCtrl'
    }
  }
})
.state('dashboard', {
    url: "/dashboard",
    controller: 'DashboardCtrl',
    views: {
        'main': {
            templateUrl: "static/templates/dashboard.html",
        },
        'content' : {
            templateUrl: 'static/templates/partials/dashboard-content.html',
            controller: 'DashboardContentCtrl'
        }
    }
});

我的目标是加载“仪表板”＆＃39;动态模板（这是有效的）。但在此之后，填充内容＆＃39; ui-view with＆＃39; dashboard-content.html＆＃39;。

dashboard.html

<div class="span3">
   <!-- A bunch of plain html -->
</div>
<div class="span9" ui-view='content'></div>

我的索引文件（加载整个应用程序）有一个名为＆＃34; main＆＃34;的ui视图，它似乎工作正常。我需要这个才能工作，因为＆＃39; dashboard-content.html＆＃39;包含需要在登录站点中可用的菜单项。仅限内容＆＃39;中的内容ui-view将发生重大变化。其他任何东西都会有一些简单的东西，比如活跃的＆＃39;类应用于链接。

Answer 1

在第二个视图中使用绝对命名def：

// instead fo this
// 'content' : {
// use this
'content@dashboard' : {
    templateUrl: 'static/templates/partials/dashboard-content.html',
    controller: 'DashboardContentCtrl'
}

文档参考（及其引用的一小部分）：

View Names - Relative vs. Absolute Names

  

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

您还可以查看此内容以获取更多说明和工作插件

• Angular UI Router - Nested States with multiple layouts
• ui router - nested views with shared controller（有关嵌套的一些细节）