角UI路由器嵌套视图问题 [英] Angular UI Router Nested Views Issue

问题描述

我有一些问题所著的Grokking如何角UI路由器嵌套视图的工作。

I'm having some issues grokking how Angular UI Router nested views work.

我的$ stateProvider看起来是这样的：

My $stateProvider looks like this:

$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模板，动态加载（这工作）。但在那之后，填充内容的用户界面视图与仪表盘-content.html。

My goal here is to load in the 'dashboard.html' template dynamically (this works). But after that, populate the 'content' ui-view with 'dashboard-content.html'.

dashboard.html

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

我的索引文件（加载整个应用程序）有一个名为主的UI视图，这似乎是工作的罚款。我需要这个工作，因为仪表板content.html'包含将需要提供整个现场记录的菜单项。在内容UI，只查看项目将被改变显著。任何东西都不会只是简单的东西像应用到链接的活跃类。

My index file (that loads the whole app) has a ui-view named "main", which seems to be working fine. I need this to work because 'dashboard-content.html' contains menu items that will need to be available across the logged in site. Only items in the 'content' ui-view will be changing significantly. Anything else will just have something simple like an 'active' class applied to a link.

推荐答案

只需使用绝对命名的第二种观点DEF：

Just use absolute naming in the second view def:

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

doc文件引用的（和一个小从中引用）的：

在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。

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.

例如，在previous例如也可以写为：

For example, the previous example could also be written as:

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

您还可以检查本作更多的解释和工作plunker

You can also check this for more explanation and working plunker

• 角UI路由器 - 嵌套国多种布局


• UI路由器 - 共享控制器嵌套视图（关于嵌套一些细节）

• Angular UI Router - Nested States with multiple layouts
• ui router - nested views with shared controller (for some details about nesting)

这篇关于角UI路由器嵌套视图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！