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

问题描述

我在理解 Angular UI Router 嵌套视图的工作方式时遇到了一些问题.

我的 $stateProvider 看起来像这样:

$stateProvider.state('登录', {网址:/登录"，意见:{'主要的': {templateUrl: "static/templates/login.html",控制器:'登录控制'}}}).state('仪表板', {网址:/仪表板"，控制器:'DashboardCtrl',意见:{'主要的': {templateUrl: "static/templates/dashboard.html",},'内容' : {templateUrl: 'static/templates/partials/dashboard-content.html',控制器:'DashboardContentCtrl'}}});

我的目标是动态加载dashboard.html"模板(这是有效的).但在那之后，用dashboard-content.html"填充内容"ui-view.

dashboard.html

<!-- 一堆普通的 html -->
<div class="span9" ui-view='content'></div>

我的索引文件(加载整个应用程序)有一个名为main"的 ui-view，它似乎工作正常.我需要它来工作，因为dashboard-content.html"包含需要在登录站点上可用的菜单项.只有内容"ui 视图中的项目会发生显着变化.其他任何东西都会有一些简单的东西，比如应用于链接的活动"类.

解决方案

在第二个视图def中使用绝对命名即可:

//代替这个//'内容' : {//用这个'内容@仪表板':{templateUrl: 'static/templates/partials/dashboard-content.html',控制器:'DashboardContentCtrl'}

文档参考(以及其中的一小段引用):

查看名称 - 相对名称与绝对名称

<块引用>

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

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

.state('报告',{意见:{'过滤器@':{}，'表数据@':{}，'图@':{}}})

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

• Angular UI 路由器 - 具有多种布局的嵌套状态
• ui 路由器 - 带有共享控制器的嵌套视图(有关嵌套的一些详细信息)

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

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

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>

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.

解决方案

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

The doc reference (and a small cite from it):

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.

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

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

You can also check this for more explanation and working plunker

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

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