AngularJs ui-路由嵌套状态“无法解析状态”错误

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

当我调用此函数时，我得到 Could not resolve 'layout.tag.add' from state 'layout'。如果我将其重命名为 layout.addTag 它可以正常工作。嵌套标签会导致问题。我怎样才能正确地嵌套这样的状态？编辑：我添加了空状态

state('layout.tag',{

}).

现在异常消失了。但是，现在未呈现视图。我得到空屏幕。我尝试为状态添加 abstract : true 但它没有 helped.This state need some configuration?

Answer 1

如果你想使用这个层次结构，你可能（不要引用我的话，但是试试）需要引入一个中间 layout.tag 状态。

UI 路由器在基于 'dot-notation' 的嵌套上可能会失败，因为您实际上正在跳过一个状态。

更新：基于 source

中此片段中的正则表达式

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

它确实在寻找名为 'layout.tag' 的父状态。

所以你要么需要接受 'layout.addTag' 层次结构，要么引入一个中间 'layout.tag' 状态

Answer 2

在您的州层次结构中，确实必须存在所有三个州。

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

因为状态name中的'.'(dot)简单的表示层级(parents,盛大 parents)

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

parent 包含 child.
child 明确使用绝对视图命名来定位 grand-parent

所以，这行得通（我更喜欢那样，因为我们获得了继承 parent-child）

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

所以现在，元素 <div ui-view ></div> 被注入到 grand-parent 中，并且还作为 child 的 anchor/target。

查看文档：

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

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

.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

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.

AngularJs ui-路由嵌套状态“无法解析状态”错误

AngularJs ui-route nested state “could not resolve state” error

angularjs

angular-ui-router

Scope Inheritance by View Hierarchy Only

View Names - Relative vs. Absolute Names