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

Question

我正在使用angular-ui-bootstrap tabs和angular-ui-router。我想在点击标签时将特定状态加载到标签窗格中。这工作正常。问题在于状态被加载到DOM中的每个选项卡窗格中。尽管用户永远无法说出，但是在DOM中不必要地重复所有这些内容并不是一个好主意。为什么发生这种情况的原因很明确 - 国家模板被插入到用户界面视图，如可以看到下面：

<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

我已经找到了解决办法。诀窍是使用multiple named views with ui-router

的HTML代码应该改变，以使得用户界面视图现在被命名（注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的图。

Answer 2

虽然我不熟悉这个标签指令，如果你正在寻找只是有内容只加载一次，你可以利用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>