angular-ui-router和angular-ui-bootstrap选项卡：内容多次加载到DOM中

Question

我正在使用angular-ui-bootstrap 选项卡和angular-ui-router。 单击选项卡时，我想将特定状态加载到选项卡窗格中。 一切正常。 问题在于状态被加载到DOM中的每个选项卡窗格中。 尽管用户永远不会说，但是让所有这些内容在DOM中不必要地重复并不是一个好主意。 发生这种情况的原因很明显-状态模板已插入到ui-view中，如下所示：

<tabset>
  <tab class="clinical-tabs" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" ui-sref="activity.clinical.{{tab.title}}">
    <div ui-view></div>
  </tab>
</tabset>

结果是在每个选项卡窗格中都加载了内容：

<div class="tab-content">
  <!-- ngRepeat: tab in tabs -->
  <div class="tab-pane ng-scope active" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
    <!-- uiView:  -->
    <div ui-view="" class="ng-scope">
      CONTENT IS LOADED HERE
    </div>
  </div>
  <!-- end ngRepeat: tab in tabs -->

  <div class="tab-pane ng-scope" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
    <!-- uiView:  -->
    <div ui-view="" class="ng-scope">
      CONTENT IS ALSO LOADED HERE
    </div>
  </div>
  <!-- end ngRepeat: tab in tabs -->
  ...
  ...
  ...
</div>

就像我说的那样，问题的原因很明显。 但是，我对Angular的经验不足，无法知道如何提出解决方案。

Answer 1

虽然我对这个tab指令不熟悉，但是如果您只希望将内容加载一次，则可以使用ngRepeat的$first特殊作用域变量，该变量仅在第一次迭代时才等于true 。

将其与ngIf结合使用，您将获得以下内容：

<tabset>
  <tab class="clinical-tabs" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled" ui-sref="activity.clinical.{{tab.title}}">
    <div ng-if="$first" ui-view></div>
  </tab>
</tabset>

会产生：

<div class="tab-content">
  <!-- ngRepeat: tab in tabs -->
  <div class="tab-pane ng-scope active" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
    <!-- uiView:  -->
    <div ui-view="" class="ng-scope">
      CONTENT IS LOADED HERE
    </div>
  </div>
  <!-- end ngRepeat: tab in tabs -->

  <div class="tab-pane ng-scope" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
  </div>
  <!-- end ngRepeat: tab in tabs -->
  ...
  ...
  ...
</div>

Answer 2

我找到了解决方案。 诀窍是在ui-router中使用多个命名视图

应当更改HTML代码，以便现在命名ui视图（注意，不再需要ui-sref）：

<tabset>
  <tab class="clinical-tabs" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
    <div ui-view="{{tab.title}}"></div>
  </tab>
</tabset>

在主模块中，$ stateProvider应配置不同有一个很好的教程与UI的路由器设置了多个命名视图这里 。 结构应类似于：

.state('[parent]', {
  url: '/[someurl]',
  views: {
    '': { //<--this is the main template
      templateUrl: 'views/[view].html',
      controller: '[controller]'
    },
    '[child]@[parent]': { //<--these are the nested, named views that correspond to each tab
      templateUrl: 'views/[view].html',
      controller: '[controller]'
    },
    '...

现在，不是将一个模板注入DOM 5次（用于5个选项卡），而是将每个模板注入其正确的ui视图中，因此没有重复项。