Question

根据多个命名视图（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"
    }
    }
})

是否有可能实现我的目标？或者我做错了什么？

关心
Sarvesh

Answer 1

如果我确实理解你的目标，你几乎就在那里。唯一的调整应该是：

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

原因是，我希望您的 ViewA 和 ViewB 都在根级别上定义（索引。 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是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

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

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

请注意，视图名称现在指定为绝对名称，而不是相对名称。它定位于根未命名模板中的“过滤器”，“tabledata”和“图表”视图。由于它没有命名，因此'@'后面没有任何内容。根未命名的模板是您的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"
        }
      }
    })

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

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

1 个答案: