Angularjs：加載標籤基於活動標籤，但防止在訪問標籤上呈現

Question

我有一個頁面有大約8個標籤，每個標籤都有很多的html控制器（數據綁定），所以數據呈現變得緩慢。
因此，我使用ng-if條件基於使用ng-click標籤找到的活動標籤。使用css類使活動選項卡變爲可見。 因此，在使用ng-if條件後，默認選項卡被快速加載，隨後在選項卡上單擊每個選項卡都會加載。但如果再次單擊之前加載的選項卡，則會因ng-if條件再次加載。 如果我不使用基於活動選項卡的ng-if條件，那麼頁面的初始加載速度非常慢，但由於在開始時加載了整個選項卡，因此在選項卡之間導航會更快。但此方法效率不高，因爲開始時頁面加載速度很慢。 所以我想加載基於活動選項卡的標籤，如下所示。但我不想重新加載或再次爲加載一次的選項卡呈現選項卡。那麼如何做到呢？

<div class="claimant-data-nav " ng-controller="MyController"> 
    <ul class="nav nav-tabs "> 
     <li ng-repeat="tabname in Mylist | unique:'TabName'" ng-class="{'active':tabname.TabName == 'Tab1'}"> 
      <a data-target="#tab-{{tabname.TabName}}" data-toggle="tab" ng-click="activetab(tabname.TabName)">{{tabname.TabName}}</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.TabName}}" href="javascript:void(0)" ng-repeat="tabname1 in Mylist | unique:'TabName'">{{tabname1.TabName}}</a> 
     <div id="tab-{{tabname2.TabName}}" ng-class="{'tab-pane fade active in':tabname2.TabName == 'Tab1','tab-pane fade':tabname2.TabName != 'Tab1'}" ng-repeat="tabname2 in Mylist | unique:'TabName'"> 
      <div ng-if="activetab == tabname2.TabName"> 
      <!-- data binding logic here.It has lot of angularjs databindings.--> 
      </div> 
     </div> 
    </div> 
</div>  

Answer 1

你加載從Ajax調用所有的數據，或者是被加載的靜態模板。無論哪種情況，您都需要維護另一個示波器映射表，其保留已經加載/單擊的製表符狀態。更新你的ng-if條件來執行返回true或false的函數。該功能可以首先檢查活動標籤，然後檢查它是否最初加載。

如果標籤數據已經加載，那麼它只是一個顯示/隱藏遊戲，否則顯示綁定和控制器功能。