AngularJs ui-route嵌套状态“无法解决状态”错误

Question

这是我的路线配置

 $stateProvider.state('layout', {
            abstract: true,
            controller: "MenuCtrl",
            templateUrl: "views/layout/MainLayout.html"
        }).
            state('layout.home', {
                url: '/',
                templateUrl: 'views/Main.html',
                controller: 'MainCtrl'
            }).state('layout.tag.add', {
                url: '/addTag',
                templateUrl: 'views/AddTag.html',
                controller: 'AddTagCtrl'
            })

后来我的代码功能：

 var goToAddTagPage = function(){
        $state.go('layout.tag.add');
    };

当我调用此函数时，我无法解析＆＃39; layout.tag.add＆＃39;来自州＆＃39;布局＆＃39;。如果我将其重命名为layout.addTag它可以正常工作。嵌套标记会导致问题。我怎样才能正确地嵌套这样的状态？ 编辑：我添加了空状态

state('layout.tag',{

}).

现在异常消失了。但是现在没有渲染视图。我得到空屏幕。我尝试添加abstract：true for state但它没有帮助。这个状态需要一些配置吗？

Answer 1

在您的州级别中，确实必须存在所有三种状态。

state('layout', {...}
state('layout.tag', {...}
state('layout.tag.add', {...}

因为状态名称中的'.' （点）仅代表层次结构（父母，祖父母）

但是，一旦我们在grand-parent和child之间添加新的父级，我们需要确定，

• parent包含一个视图＆＃34; target＆＃34;为了一个孩子。
• child显式使用绝对视图命名来定位祖父

所以，这会起作用（我宁愿这样做，因为我们获得了继承父子）

state('layout.tag', {
    template: '<div ui-view ></div>'
    ...
}

所以现在，元素<div ui-view ></div>注入了祖父母，并且还充当了孩子的锚点/目标。

检查文档：

Scope Inheritance by View Hierarchy Only

  

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围属性的继承与状态的嵌套无关，也与视图嵌套（模板）无关。

     

完全有可能您有嵌套状态，其模板在您网站中的各种非嵌套位置填充ui-views。在这种情况下，您不能期望在子状态视图中访问父状态视图的范围变量。

第二种方法是使用绝对视图命名并跳过祖父

.state('layout.tag.add', {
    url: '/addTag',
    views: {
      '@layout': { // target unnamed view anchor in grand-parent
         templateUrl: 'views/AddTag.html',
         controller: 'AddTagCtrl'
         }
     }
 })

View Names - Relative vs. Absolute Names

  

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

Answer 2

如果您想使用此层次结构，您可以（不要引用我，但请尝试）引入中间layout.tag状态。

UI路由器可能无法使用点符号＆＃39;基于嵌套，因为你基本上是在跳过一个状态。

更新：根据source

中此代码段中的正则表达式

var compositeName = /^(.+)\.[^.]+$/.exec(state.name);

它会查找名为＆＃39; layout.tag＆＃39;的父状态。

因此，您需要接受＆＃39; layout.addTag＆＃39;层次结构或介绍中间的layout.tag＆＃39;状态