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

Question

我有一个包含大约 8 个选项卡的页面，每个选项卡都有很多 HTML 控制器（数据绑定）。所以数据渲染变慢了。

所以我使用了基于活动选项卡的 ng-if 条件，该活动选项卡是使用 ng-click on tab 找到的。使用 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-click 中我激活了加载器

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

为了检查 ng-repeat 是否完整，我使用了以下指令

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

您可以使用 angularjs 的 ng-show 指令来做到这一点。 这是一个示例供您参考。

像这样在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

希望对你有帮助。

谢谢。