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

debugcn 发表于 Dev

保罗

我正在使用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经验来了解如何提出解决方案。

保罗

我找到了解决方案。诀窍是在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视图中，因此没有重复项。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。