Javascript DOM渲染时Angularjs加载微调器或加载逻辑

我有一个大约有8个选项卡的页面，每个选项卡都有很多HTML控制器（数据绑定）。因此，数据呈现变得很慢

所以我使用了基于活动选项卡的ng if条件，这是使用ng单击选项卡找到的。使用CSS类使活动选项卡可见。使用ng if条件后，会快速加载默认选项卡，随后单击其他选项卡时，会加载每个选项卡。但是每个选项卡需要大约3到6秒的时间来呈现，此时用户不知道发生了什么以及页面是否正在加载。因此，我计划包括一个加载微调器

现在我想在单击每个选项卡时显示angularjs加载微调器，直到选项卡完全渲染。（在ng repeat完成之前，该选项卡不会处于活动状态，因为它将继续渲染）。因此，我计划在选项卡的ng click事件期间加载微调器。ng repeat完成后，加载微调器将被移除。但问题在于旋转器的启动部分。即使我在

ng click

中启动微调器加载逻辑，它也几乎在选项卡渲染结束时启动，当

ng repeat

完成时，微调器立即停止。问题是由于页面渲染后台进程导致微调器卡住并正确加载。那么，如何使用加载程序或加载消息进行选项卡渲染？下面是我的示例代码，用于页面ng click event和查找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重复是否完成，我使用了以下指令

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();
});

---

您只需使用

$timeout

函数触发微调器，并等待其承诺激活选项卡：

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

---

您可以使用angularjs的ng show指令来实现这一点。 这里有一个例子供你参考

像这样在html中放置一个加载程序

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

您也可以访问此链接

希望它能帮助你

---

谢谢。

显示一个简单的加载器不是像在ajax调用等过程中那样的问题。我需要在渲染过程中显示加载器。问题是加载器本身在渲染过程中不会显示

<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;
          });
}