angular 中带有 UI-Router 的抽象子状态和孙状态

Question

在尝试实现属于抽象父状态且自身具有子状态的抽象子状态时遇到问题。类似于以下内容：

.state('parent', {
  abstract: true,
  url: '/parent',
  templateUrl: 'parent/parent.html',
  controller: 'parent-controller',    
})

.state(parent.child', {
  abstract: true
  url: '/child',
  templateUrl: 'parent/child/child.html',
  controller: 'child-controller',
})

.state(parent.child.grandchild', {
  url: '/grandchild',
  templateUrl: 'parent/child/grandchild/grandchild.html',
  controller: 'grandchild-controller',
})

到目前为止我还没有能够让它工作，也没有找到任何解决这个问题的答案。该文档似乎只涵盖亲子，但没有涉及孙子。

在 angular 中使用 UI-路由器是否可行？我的失败是否与声明状态名称时使用点符号有关？

Answer 1

这个概念应该有效。有a working plunker

只需修正几处拼写错误

  .state('parent', {
    abstract: true,
    url: '/parent',
    templateUrl: 'parent/parent.html',
    controller: 'parent-controller',
  })

  .state('parent.child', {
    abstract: true,
    url: '/child',
    templateUrl: 'parent/child/child.html',
    controller: 'child-controller',
  })

  .state('parent.child.grandchild', {
      url: '/grandchild',
      templateUrl: 'parent/child/grandchild/grandchild.html',
      controller: 'grandchild-controller',
    })

确保我们有控制器

.controller('parent-controller', ['$scope', function($scope) {}])
.controller('child-controller', ['$scope', function($scope) {}])
.controller('grandchild-controller', ['$scope', function($scope) {}])

并且每个 parent 都有其 child

的目标

...
<div ui-view></div>
...

这些链接必须有效

<a href="#/parent/child/grandchild">    
<a ui-sref="parent.child.grandchild">

在action here

中查看

angular 中带有 UI-Router 的抽象子状态和孙状态

Abstract child state and grandchild state in angular with UI-Router

parent-child

angularjs

angular-ui

angular-ui-router