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

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

我推荐这样的mdProgressCircular指示器的angular-material html指令：

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

有关mdProgressCircular和angular-material的更多信息

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