角度コンパイルの進行中にアニメーションを表示する方法

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

私はそのようなHTML表示用アンギュラ材料mdProgressCircularディレクティブをお勧めします。mdProgressCircularのANG角度-材料についての詳細は

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

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