角度材料动态 mdTabs 和 ui-router 命名视图和状态

Question

目前，我正在开发一个需要动态标签的项目。为此，我使用了角度材质选项卡，并使用 ui-router 状态和命名视图概念来动态加载选项卡的内容。

例如：

<!-- 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级嵌套状态，也可以动态加载；选项卡可以动态添加或删除。

问题：我的应用程序理论上可以有无限的选项卡，问题是每当我切换选项卡时，所有内容都会一次又一次地加载，这会降低用户体验，因为选项卡可能处于任何可能的状态（用户界面可以根据在内容的嵌套级别上）。

问题：我们是否可以做类似的事情，因为一旦标签被加载，它应该被缓存，所以每当我们回到相同的状态时，它不应该再次加载。而且，如果将来要再次加载选项卡，我们也可以提供一些逻辑来执行此操作。我知道一定有人遇到过类似的问题，只是出于好奇，我发布了这个问题。

Answer 1

做了更多研究，发现ui-router-extras 提供了一些额外的支持，例如StickyStates aka ParallelStates、Deep State Redirect 等。有关更多信息，请查看ui-router extras。

对我来说，这是一个死胡同，因为上面提到的库支持存在于angular-ui-router ~0.2.8，而我目前正在使用angular-ui-router 的下一个版本，即1.0.0-rc.1。因此，我联系了开发人员（对Chris Thielen 大喊大叫）并得到更新，Sticky States 的ui-router rc-1.0.0 实现已完成。有关更多信息，请查看update。

所以基本上，我正在回答我自己的问题。如果您使用的是旧版本的ui-router，则答案是使用ui-router-extras，或者使用ui-router 1.0.0-rc.1 和Sticky States。

注意：我还没有测试过上面提到的库，但是通过查看文档我很确定将来我一定会用它来解决上面提到的问题。