Angular UI路由器：保持狀態變化的兄弟姐妹視圖

我有一個經典的設置實體情況，用戶從列表中選擇一個項目，並將其顯示在列表旁邊的視圖中。Angular UI路由器：保持狀態變化的兄弟姐妹視圖

使用UI路由器實現這個功能的典型方法是擁有一個模板，該模板包含列表項的html和列表項的ui-view，項目狀態是列表狀態的子項。

我卻想的項目和列表的狀態是兄弟姐妹，而不是與他們的模板被插入到一個名爲UI的觀點：

$stateProvider.state("inbox", { 
    abstract: true, 
    url: "/inbox", 
    templateUrl: "inbox.html" 
}).state("inbox.list", { 
    url: "?filter_by", 
    views: { 
    list: { 
     templateUrl: "inbox.list.html", 
     controller: "ListCtrl" 
    } 
    } 
}).state("inbox.thread", { 
    url: "/:id?filter_by", 
    views: { 
    thread: { 
     templateUrl: "inbox.list.html", 
     controller: "ListCtrl" 
    } 
    } 
})

inbox.html：

<div class="wrapper"> 
    <div class="more wrappers"> 
    <ul ui-view="list"></ul> 
    </div> 
    <div ui-view="thread"></div> 
</div>

明顯的問題這裏是，只要你從列表中選擇一個線程，列表本身就會消失。這可以通過在「inbox.thread」狀態下複製「list」視圖配置來解決，但是每次我選擇一個新線程時，列表視圖仍然會重新加載。

我希望他們作爲兄弟國家的原因是，我可以過濾列表，因此只針對名爲ui-view的「列表」，同時保留線程視圖與任何線程被選中。

所以 - 有沒有辦法讓兄弟姐妹名爲ui-views？

來源

2014-05-12 Elise

你應該真的接受你得到的答案，因爲它解決了你的問題優雅！ – colthreepv

這裏的答案是：

移動共同的東西 - 一個級別。找到最小公分子。

我們仍然可以在父級別上定義「InboxCtrl」。即使這個狀態是抽象的。而且可能有列表數據被加載並存儲在$ scope中的地方。兩個孩子訪問到該集合...

$stateProvider.state("inbox", { 
    abstract: true, 
    url: "/inbox", 
    templateUrl: "inbox.html", 
    controller: function($scope){ 
     $scope.items = ... // load data only once 
    } 
})

這是記錄在這裏：

Abstract State Usage Examples（滾動部分稱爲組合）

另外，鏈接到working plunker（以及從文檔）

來源

2014-05-13 06:05:51

Angular UI路由器：保持狀態變化的兄弟姐妹視圖

回答

相關問題