22

データの読み込みが完了するまで AngularJS に読み込みスピナーを表示させるにはどうすればよいですか?

コントローラーが$scope.items = [{name: "One"}]静的にセットアップされ、データを取り込む AJAX ローダーがある$scope.items[0]['lateLoader'] = "Hello"場合、AJAX の読み込みが完了するまでスピナーを表示してから、バインドされたスパンに取得したデータを入力します。

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

このコードはバインドされたスパンにすぐに値を設定し、item.lateLoader空のスピナーは何も置き換えません。

これをきれいにするにはどうすればよいですか？

4

4 に答える 4

23

他の回答に従ってカスタムディレクティブを作成しますが、より複雑な機能に入る前に学ぶことをお勧めするディレクティブなしでそれを行う方法を次に示します。

  1. setTimeout を使用して ajax 呼び出しをシミュレートする
  2. ロード アイコンは事前にロードされており、データがロードされると非表示になります。シンプルな ng-hide ディレクティブです。
  3. 私の例には読み込み中の画像はなく、非表示になるテキストがいくつかあります (明らかに、html には正しい css 参照があります)。

デモ: http://plnkr.co/edit/4XZJqnIpie0ucMNN6egy?p=preview

意見：

<ul >
  <li ng-repeat="item in items">
    <p>Always present: {{item.name}}</p>
    <p>Loads later: {{item.lateLoader}} <i ng-hide="item.lateLoader"  class="icon icon-refresh icon-spin">loading image i don't have</i></p>
  </li>
</ul>

コントローラ：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [{name: "One"}];
  setTimeout(function() {
    $scope.$apply(function() {
     $scope.items[0].lateLoader = 'i just loaded';  
    });
  }, 1000);
});
于 2013-04-23T16:47:00.993 に答える
22

私は実際にしばらくの間、このためのソリューションを使用してきましたが、これはうまく機能し、私の意見ではタイムアウトを使用するよりも優れています。私は $resource を使用していますが、$http でも同じことができます。私の $resource オブジェクトでは、ロード済みを true に設定するビットを次のコードに追加します。

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

次に、私の見解では、次を使用できます。

ng-hide="customer.loaded"

もちろん、$resource をコントローラーで直接使用することはありません。それを customerRepository サービスに抽出しますが、ここでこのように表示する方が簡単です。

于 2014-02-13T17:27:23.963 に答える
0

@ルクマ、

素晴らしい答えです。別の方法として、$timeout を挿入し、ネイティブのタイムアウト関数を置き換えることができます。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

        $scope.name = 'World';
        $scope.items = [{name: "One"}];
        $timeout(function() {
                $scope.$apply(function() {
                        $scope.items[0].lateLoader = 'i just loaded';  
                });
        }, 1000);
});
于 2013-10-24T17:43:28.047 に答える