web-dev-qa-db-ja.com

AngularJS：データがロードされるまでHTMLのロードを表示

データの読み込みが完了するまで、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が空の場合、スピナーは何も置き換えられません。

どうすればきれいにできますか？

javascriptangularjsangularjs-ng-repeat
21
JP.

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

  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);
});
24
lucuma

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

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

次に、私の見解では、私は使用することができます：

ng-hide="customer.loaded"

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

20
Jim Cooper

カスタムディレクティブを作成し、スピナーでデフォルトのマークアップを配置します。

カスタムディレクティブに関するリンクを次に示します。

1）Eggheadの動画は素晴らしいです。 http://www.egghead.io/video/xoIHkM4KpHM

2）公式Angularディレクティブに関するドキュメント http://docs.angularjs.org/guide/directive

3）angular in 60ish minutes http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals- in-60-ish-minutes.aspx

5
vittore

@lucuma、

別の方法として、$ 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);
});
0
C. S.