9

大きなモデルがあり、ng-repeat がモデル内のすべてのアイテムをフォームにバインドするのに数秒かかります。これが起こっている間、スピナーを表示したいと思います。スピナーをいつ非表示にするかがわかるように、バインドが完了したときに発生するイベントはありますか?

4

4 に答える 4

2

アイテムのコンパイル/リンク機能を監視$lastし、スコープにカスタム イベントを発生させることができます

于 2013-11-09T11:02:37.773 に答える
2

そのような状況では、Angular ui ルーター (ui ルーターを使用している場合) によって発生する$viewContentLoadedイベントと組み合わせて$timeoutサービスを使用します。

$timeout について:

このサービスは、"flush" および "verifyNoPendingTasks" メソッドを追加する $timeout サービスの単なるデコレーターです。

$viewContentLoaded について

DOM がレンダリングされた後、ビューが読み込まれると発生します。ビューの「$scope」がイベントを発行します。

私の個人的なユースケースは、 paymentForm が非表示の入力を動的に生成し (ng-bind-html を介して挿入したサーバーサイドで計算された HTML データを使用して)、支払いゲートウェイに送信することです。

$scope.$on('$viewContentLoaded', function() { 
    $timeout(function () {
        $scope.paymentForm.submit();
    });
});

参考までに、上記のコード例の .submit() は、フォームを自動送信できるようにするためにフォームで使用されるカスタム ディレクティブの関数です。

ジュリアン

于 2015-04-14T11:30:50.273 に答える
-1

このために、私は通常、ビューに ng-show="submitting" を使用してスピナー div を作成します。次に、データがロードされたら、$scope.submitting を「false」に設定して、スピナーが非表示であることを示します。

<!-- In your HTML -->
<div class="spinner" ng-show="submitting">
<div ng-repeat="p in people">
   {{p.name}}
</div>

//In Javascript
$scope.submitting = true;
$scope.load_data = function(){
    $http.get('/api/route')
        .then(function(success){
            $scope.submitting = false;
        },function(error){
            console.log(error);
        });
}

それが役立つことを願っています

于 2013-11-08T16:36:28.020 に答える