角材料動態mdTabs和UI路由器命名的視圖和狀態

目前，我正在處理一個需要動態選項卡的項目。爲此，我使用角度材質選項卡，並且還使用ui-router狀態和命名視圖概念來動態加載選項卡的內容。角材料動態mdTabs和UI路由器命名的視圖和狀態

對於例如爲：

<!-- mdTabs --> 
    <md-tabs md-autoselect> 

    <!-- mdTab --> 
    <md-tab ng-repeat="tab in home.tabs" label="{{tab.title}}" md-on-select="home.selectTab(tab)"> 

     <md-tab-body> 
     <div ui-view="{{tab.viewName}}"></div> 
     </md-tab-body> 
    </md-tab> 

    </md-tabs>

選項卡中添加，如：

vm.tabs = [{ 
     title: 'Tab-A', 
     state: 'mainState.tabStateA', 
     viewName: 'tabA' 
    }, { 
    title: 'Tab-B', 
    state: 'mainState.tabStateB', 
    viewName: 'tabB' 
    }];

你可以看看這個CodePen的示例實現。

背景：每當我改變標籤，我改變狀態並加載內容。該狀態可以進一步具有其他n級嵌套狀態，也可以動態加載;這些選項卡可以動態添加或刪除。

問題：我的應用程序理論上可以有無限的選項卡，問題是每當切換選項卡時，所有內容都會一次又一次地加載，這會惡化UX，因爲選項卡可能處於任何可能的狀態（UI可能會更改基於內容的嵌套級別）。

問題：我們可以做一些類似的事情，因爲一旦標籤被加載一次就應該被緩存，所以每當我們回到相同的狀態時它不應該再次加載。而且，如果將來該標籤應該再次加載，我們可以提供一些邏輯來做到這一點。我知道，有人必須有類似的問題，只是出於好奇心，我發佈這個問題。

來源

2017-02-19 Gaurav

你有沒有想過這個？ –

@MikeFeltman我做了，我已經添加了這個答案。 – Gaurav

做了一些更多的研究和發現，有ui-router-extras提供像StickyStates一些額外的支持又名ParallelStates，Deep State Redirect等詳細信息看一看ui-router extras。

對我來說，這是一個死衚衕，因爲上述圖書館支持目前爲angular-ui-router ~0.2.8，我目前正在使用下一個版本的angular-ui-router，即1.0.0-rc.1。所以，我聯繫了dev（對Chris Thielen大吼大叫），並得到了Sticky States爲ui-router rc-1.0.0實現完成的更新。欲瞭解更多信息請查看update。

所以基本上，我回答我自己的問題。如果您使用舊版本的ui-router或者使用ui-router 1.0.0-rc.1以及Sticky States，則答案是使用ui-router-extras。

注意：我沒有測試過上述庫，但通過查看文檔，我確信將來我肯定會將這個問題用於解決上述問題。

來源

2017-03-15 16:08:03 Gaurav

謝謝。我有類似的問題，但能夠用ui-router 0.4.2解決它。我的問題在這裏：http://stackoverflow.com/questions/42773277/md-tabs-with-angular-ui-router-not-rendering-grandchildren/42792424#42792424 –

角材料動態mdTabs和UI路由器命名的視圖和狀態

回答

相關問題