Angularjs UI-Router：如何在嵌套视图内创建视图？ （3级嵌套视图）

Question

我试图创建一个使用UI-Router

代码

.state('discussions', { 
      url: '/discussions', 
      views: { 
       '': { 
        templateUrl: 'views/groups/groupBaseView.html' 
       }, 
       'leftcontainer@discussions': { 
        templateUrl: 'views/groups/groupView.html', 
        controller: 'groupController', 
        views: { 
         'rightcontainer@leftcontainer@discussions': { 
          template: 'hi' 
         } 
        } 
       } 
      } 

    }); 

你可以想像像

--groupBase 
--groupBase/groupView 
--groupBase/groupView/discussionView 

的视图的嵌套视图内视图UI工作正常，直到--groupBase/groupView但disucussionView没有得到加载groupView

Answer 1

有a worknig plunker

查看嵌套可能，一个国家的内部。该国家views: {}设置必须包含所有这些观点：

.state('discussions', { 
    url: '/discussions', 
    views: { 
    '': { 
     templateUrl: 'views/groups/groupBaseView.html' 
    }, 
    'leftcontainer@discussions': { 
     templateUrl: 'views/groups/groupView.html', 
     controller: 'groupController', 
    }, 
    'rightcontainer@discussions': { 
     template: '<h3>hi from right container</h3>' 
    }, 
    } 

}); 

到位到这一点，我们就可以实现视图嵌套

• 第一视图（的意见/组/ groupBaseView.html '）被注入到未命名的UI视图里面index.html
• 第二视图（ '视图/组/ groupView.html'）被注入的意见/组/ groupBaseView.html'
• 第三转到的意见/组/ groupView.html'

所以，'views/groups/groupView.html'看起来就像这样：

<div> 
    ... 
    <div ui-view="leftcontainer"></div> 
</div> 

和'views/groups/groupView.html'将是：

<div> 
    ... 
    <div ui-view="rightcontainer"></div> 
</div> 

检查它here

Answer 2

您不能拥有嵌套的“视图”属性。你必须首先定义一个孩子的状态，然后定义它的视图。

一个简单的例子：

.state("a", { 
    views: { 
     template:"<ui-view></ui-view>" 
    } 
}) 
.state("a.b", { 
    views: { 
     template:"<ui-view></ui-view>" 
    } 
}) 
.state("a.b.c", { 
    views: { 
     template:"<h1>Something</h1>" 
    } 
})