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>