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

希望它会对你有所帮助。

感谢。

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

2 个答案: