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

【问题标题】：angular-ui-router and angular-ui-bootstrap tabs: content being loaded into DOM multiple timesangular-ui-router 和 angular-ui-bootstrap 选项卡：内容被多次加载到 DOM
【发布时间】：2014-08-29 17:57:04
【问题描述】：

我正在使用 angular-ui-bootstrap tabs 和 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 经验，不知道如何提出解决方案。

【问题讨论】：

标签： javascript angularjs angular-ui angular-ui-bootstrap angular-ui-router

【解决方案1】：

虽然我不熟悉此选项卡指令，但如果您希望只加载一次内容，您可以使用 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>

【讨论】：

感谢您的建议。不幸的是，这只适用于第一个选项卡。如果我单击任何其他选项卡，则不会加载任何内容。单击每个选项卡时，我需要为每个选项卡加载相应的内容（即进入状态）：例如，单击第一个选项卡并将其模板注入到相应的 ui 视图中。目前，它正在将模板注入所有 ui-views（如果我有 5 个选项卡，它会被注入 DOM 5 次）。
啊，我误会了。在这种情况下，您可能正在寻找的实际上是ngInclude
我无法确定 ngInclude 将如何解决问题。可能会，但我看不到。无论如何，我找到了一个很好的解决方案（请参阅发布的答案）。

【解决方案2】：

我找到了解决方案。诀窍是使用multiple named views with ui-router

应更改 HTML 代码，以便现在命名 ui-view（注意不再需要 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-router here 设置多个命名视图。结构应该类似于：

.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-view 中，因此不会出现重复。

【讨论】：