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

我的目标是动态加载 'dashboard.html' 模板（这可行）。但在那之后，用 'dashboard-content.html'.

填充 'content' ui-view

dashboard.html

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

我的索引文件（加载整个应用程序）有一个名为 "main" 的 ui-view，它似乎工作正常。我需要它才能工作，因为 'dashboard-content.html' 包含需要在登录站点上可用的菜单项。只有 'content' 用户界面视图中的项目会发生重大变化。其他任何东西都会有一些简单的东西，比如 'active' class 应用于 link.

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

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

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

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

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

Angular UI Router - Nested States with multiple layouts
（关于嵌套的一些细节）

Angular UI 路由器嵌套视图问题

Angular UI Router Nested Views Issue

javascript

angularjs

angular-ui-router

View Names - Relative vs. Absolute Names