首页 文章

Angular UI路由器嵌套视图问题

提问于
浏览 次
2

我在讨论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'填充'内容'ui-view .

dashboard.html

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

我的索引文件（加载整个应用程序）有一个名为“main”的ui视图，似乎工作正常 . 我需要这个才能工作，因为'dashboard-content.html'包含需要在登录站点中可用的菜单项 . 只有“内容”ui视图中的项目才会发生显着变化 . 其他任何东西都只会像应用于链接的“主动”类一样简单 .

javascript angularjs angular-ui-router

1 回答

  • 1

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

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

    文档参考（以及它的一个小引用）：

    视图名称 - 相对名称与绝对名称

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

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

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

    你也可以查看这个以获得更多解释和工作plunker

    回复于

相关问题