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>" 
    } 
})