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

【问题标题】：How to show some animation while angular compilation is in process如何在角度编译过程中显示一些动画
【发布时间】：2016-05-02 14:03:40
【问题描述】：

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

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

我想知道这个问题是否有解决方案。

【问题讨论】：

解决方案是将数组的数量分块成更易于管理的部分，让应用程序消化小变化，然后再获得另一个小变化供它消化。此外，如果您的数据存在于 API 中，只需获得足够的数据以表明屏幕外还有更多内容可以展示，并在用户滚动到结尾时获得更多数据。

标签： javascript angularjs compilation

【解决方案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>

【讨论】：

【解决方案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 角度材料的更多信息

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

【讨论】：