角材料动态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路由器命名的视图和状态

回答

相关问题