angularjs – 在ui-router中使用左栏布局的嵌套状态或视图？

首先是根状态。这里是根状态命名为’index’。这是抽象的，可以为我们做一些决心。它不影响儿童状态命名，并且不会扩展url(因为是未定义的)

$stateProvider
    .state('index',{
        abstract: true,//url: '/',views: {
          '@' : {
            templateUrl: 'layout.html',controller: 'IndexCtrl'
          },'top@index' : { templateUrl: 'tpl.top.html',},'left@index' : { templateUrl: 'tpl.left.html','main@index' : { templateUrl: 'tpl.main.html',})

第一个真实状态是列表，它继承自父项，但是具有属性parent：’index’，因此父名称不会影响状态名称。

优点是，它可以继承很多解决的东西。此外，对于所有其他父状态，根状态可以加载一次

.state('list',{
        parent: 'index',url: '/list',templateUrl: 'list.html',controller: 'ListCtrl'
      })

这是UI路由器的真正实力，因为现在我们可以看到孩子正在注入两个地方 – 1)动作部分和2)主区域

.state('list.detail',{
        url: '/:id',views: {
          'detail@index' : {
            templateUrl: 'detail.html',controller: 'DetailCtrl'
          },'actions@index' : {
            templateUrl: 'actions.html',controller: 'ActionCtrl'
          },})

这样，我们可以在现实世界中使用命名视图和多视图。请不要忘记范围定义如何：

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.

检查所有在行动here