Angularjs在DOM渲染時加載微調器或加載邏輯

Question

我有一個包含大約8個選項卡的頁面，並且每個選項卡都有很多HTML控制器（數據綁定）。所以數據渲染變慢。

因此，我使用ng-if條件基於活動選項卡，該選項卡使用ng鍵在選項卡上找到。使用CSS類使活動選項卡可見。在使用ng-if條件後，默認選項卡會快速加載，隨後在其他選項卡上單擊時，每個選項卡都會加載。但每個標籤需要大約3到6秒才能呈現，此時用戶不知道發生了什麼以及頁面是否正在加載。所以我打算包括一個加載微調器。

現在我想顯示一個angularjs加載微調，當我點擊每個選項卡，直到選項卡完全呈現。 （該選項卡將不會變爲活動，直到ng-repeat完成，因爲它保持渲染）。所以我打算在選項卡的ng-click事件期間加載微調器。 ng-repeat完成時刪除加載微調器。但問題是，紡紗人變得凝視一部分。即使我啓動了ng-click中的微調器加載邏輯，它幾乎在製表符渲染結束時開始，並且微調器會在ng-repeat完成時立即停止。問題在於頁面渲染後臺進程，這使得即使微調框卡住並正確加載它。那麼，如何使用加載器或加載消息來進行製表符呈現呢？以下是我的頁面示例代碼，ng-click事件和查找ng-repeat的結束事件。

的html代碼：

<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"> 
       <div ng-repeat="item in items" on-finish-render="ngRepeatFinished"> 
        <!-- data binding logic here.It has lot of angularjs databindings.--> 
       </div> 

      </div> 
     </div> 
    </div> 
</div>  

在

的NG-點擊我激活了裝載機

.scope.activetab = function(tabname){ 
    showloader(); 
    //some other codes here to set active tab etc. 
} 

要檢查NG重複完成下面的指令我已經使用

app.directive('onFinishRender', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        scope.$emit('ngRepeatFinished'); 
       }); 
      } 
     } 
    } 
}); 

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) { 
    removeLoader(); 
}); 

Answer 1

您可以簡單地使用$timeout函數來觸發喲烏爾微調，並等待其承諾，使您的標籤激活：

.scope.activetab = function(tabname){ 
    $timeout(function() {showloader();}) 
     .then(function() { 
      //some other codes here to set active tab etc. 
     }); 
}; 

Answer 2

你可以通過使用NG-顯示指令angularjs的。 以下是供您參考的示例。

放置在HTML裝載機這樣

<div ng-show="load">Loading...</div> 

在控制器

app.controller("showCustomer", function ($scope,myService) { 
loadCustomers(); 
function loadCustomers() { 
    $scope.load=true; 
    var promiseGet = myService.loadCustomer(); 

    promiseGet.then(function (obj) { 
     $scope.Customer = obj.data; 
     $scope.load=false; 
    }, 
      function (errorObj) { 
       $scope.error = 'failure loading Customers', errorObj; 
       $scope.load=false; 
      }); 
} 

您也可以訪問此鏈接 http://www.angulartutorial.net/2014/04/show-and-hide-in-angular-js.html

希望它會幫助你。

謝謝。