Question

我有一个名为my-list的指令，它将array作为输入数据，我使用ng-repeat重复数组并生成一个列表。如果array中包含许多objects，则生成的列表会非常慢。

生成DOM元素时，我想显示一个微调器动画。但是在生成DOM元素时，UI被冻结。

我想知道是否有解决此问题的方法。

Answer 1

您可以在指令中使用$last属性：

<强>指令：

app.directive("lastItemLoaded", function() {
    return function(scope, element, attrs) {
        if(scope.$last) {
            scope.everythingLoaded = true;
            scope.$apply();
        }
    };
}

app.controller("MainCtrl", function($scope) {
    $scope.everythingLoaded = false;
});

<强> HTML：

<div ng-repeat="thing in things" last-item-loaded></div>

<div id="mySpinner" ng-if="!everythingLoaded">
    Loading.  Please wait&hellip;
</div>

Answer 2

在请求之前，您应该将控制器变量设置为false，如下所示：（它的不起作用的代码只是例子）

$scope.someHttpRequestOnClick= function () {
     $scope.requestBusy = true;
     $http(request).then( onSuccess, function(response) {
        onFailure(response, failure);
       ......
      });
      ......
    };

function onSuccess(response){
 $scope.requestBusy = false;
  ....
}

我推荐使用angular-material mdProgressCircular指令来表示html指示符：

<div class="indicator" ng-if="requestBusy">
          <md-progress-circular class="md-warn md-hue-3" md-diameter="80"></md-progress-circular>
        </div>

有关mdProgressCircular ang angular-material

的更多信息

https://material.angularjs.org/latest/api/directive/mdProgressCircular

如何在角度编译过程中显示一些动画

2 个答案: