Angular ui.router 设置祖先状态命名视图答案

【问题标题】：Angular ui.router setting ancestor state named viewAngular ui.router 设置祖先状态命名视图
【发布时间】：2014-12-23 17:02:31
【问题描述】：

根据多个命名视图 (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views) 的文档，子状态可以使用 @ 表示法在祖先状态中设置命名视图。

这在我的示例中似乎不起作用 (http://jsfiddle.net/sarvesht/rx8jLep2/)

这就是我定义父状态和子状态的方式，我将 viewB 视图设置为子状态，但它没有反映在页面上。

.state('index', {
    url: "",
    views: {
    "viewA": {
        template: "index.viewA"
    }
    }
})
.state('index.sub',{
    views: {
    "viewB@index": {
        template: "index.viewB"
    }
    }
})

是否有可能实现我想要做的事情？还是我做错了什么？

问候
萨维什

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

如果我确实正确理解了您的目标，那么您就快到了。唯一的调整应该是：

.state('index.sub',{
    views: {
    // instead of this
    // "viewB@index": {
    // we need thsi
    "viewB@": {
        template: "index.viewB"
      }
    }
})

原因是，我希望您的 ViewA 和 ViewB 都在根级别定义 (index.html)时间>。这就是第一个状态“索引”正常工作的原因，因为它的定义是：

.state('index', {
    url: "",
    views: {
    // this is working
    "viewA": {
    // and this would be as well
    "viewA@": {      
        template: "index.viewA"
    }
    }
})

换句话说，我希望两个视图都在根视图内，名称是空字符串。这就是为什么我们可以像这样针对他们两个：

    "viewA@": {      
    "viewB@": {

见：View Names - Relative vs. Absolute Names小引：

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

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

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

请注意，视图名称现在指定为绝对名称，而不是相对名称。它的目标是位于根未命名模板中的“filters”、“tabledata”和“graph”视图。由于它未命名，因此“@”后面没有任何内容。未命名的根模板是您的 index.html。

有updated plunker，状态为def：

$urlRouterProvider.otherwise("/index/sub")
$stateProvider
    .state('index', {
      url: "/index",
      views: {
        "viewA": {
          template: "index.viewA"
        }
      }
    })
    .state('index.sub', {
      url : "/sub",
      views: {
        /*
        "viewB@index": {
          template: "index.viewB"
        },
        */
        "viewB@": {
          template: "index.viewB"
        }
      }
    })

关键是定义 url 或至少正确导航到子状态 index.sub

【讨论】：

嗨，Radim，在我上面提到的小提琴中尝试了您的解决方案，但它不起作用。
@Sarvesh，我更新了答案，并添加了指向工作示例的链接。关键是，我们必须达到状态 index.sub。所以，我为这两个州定义了 url……并使用了$urlRouterProvider.otherwise()。这不是必须的，但它可以表明我的答案是有效的......然后名为 "viewB@" 的视图确实放置在正确的位置......它有帮助吗？跨度>
谢谢，缺少 url 属性是解决方案不起作用的原因。