37

次のコードは、サービスを介して読み取り、特定の「ページ カテゴリ」(文字列) の「ページ」オブジェクトのリストを Web ページに表示します。$routeProvider.when() でオブジェクトの解決プロパティを使用すると、新しい値の準備ができるまでビューの更新を延期できます。

2 つの質問:

  1. 新しいページリストを要求するときに、読み込み中のアイコンを表示したい。サーバーからの読み取りが開始されたときのイベントを（ハックではない方法で）検出するにはどうすればよいですか（そして読み込みアイコンが表示されるはずです）？サービスで $('.pages-loading-icon').show() のようなことができると思いますが、サービスに配置されすぎてGUIに依存しすぎていることがわかりました。

  2. 新しい値の準備ができたら、古い値をフェードアウトさせ、新しい値をフェードインさせたいと思います。これを行う「角度のある」方法は何ですか? $watch を使用してコントローラーで実行しようとしましたが、フェードアウトが始まる直前に新しい値が表示されます。

コード：

app.js:

$routeProvider.when('/:cat', { templateUrl: 'partials/view.html', controller: RouteCtrl, resolve: RouteCtrl.resolve});

controllers.js:

function RouteCtrl($scope, $routeParams, pages) {
        $scope.params = $routeParams;
        $scope.pages = pages;
    }

RouteCtrl.resolve={
    pages: function($routeParams, Pages){
        if($routeParams.hasOwnProperty('cat')){
            return Pages.query($routeParams.cat);
        }
    }
}

services.js: 最後に読み取られたページは currentPages に保存され、そのカテゴリは lastCat に保存されます。

factory('Pages', function($resource, $q, $timeout){
    return {
        res: $resource('jsonService/cat=:cat', {}, {
            query: {method:'GET', params:{cat:'cat'}, isArray:true}
        }),
        lastCat: null,
        currentPages: null,
        query: function(cat) {
            var res = this.res;
            if(cat != this.lastCat){
                var deferred = $q.defer();
                var p = res.query({'cat':cat}, function(){
                    deferred.resolve(p);
                });
                this.lastCat = cat;
                this.currentPages = deferred.promise;
            }
            return this.currentPages;
        }
    };
})

view.html

<ul >
    <li ng-repeat="page in pages">
        <a href="#{{params.cat}}/{{page.slug}}">{{page.title}}</a>
    </li>
</ul>
4

6 に答える 6

61

$ resourceが統合されているため、これがコードで機能するかどうかは正確にはわかりません。しかし、角度のあるイベントを調べる価値があるかもしれません：$routeChangeStartと$routeChangeSuccess。

HTMLで：

<span ng-show="isViewLoading"> loading the view... </span>

コントローラ（上記のhtmlのスコープを定義します）：

$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
  $scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
  $scope.isViewLoading = false;
});
$scope.$on('$routeChangeError', function() {
  $scope.isViewLoading = false;
});
于 2012-09-12T05:16:59.547 に答える
4
于 2012-11-02T14:38:06.280 に答える
1

私は好き'ng-show'です...しかし、'ui-if'Angular UIプロジェクトの方が優れています..DOMからHTMLコードを削除してから...

<span ui-if = "isViewLoading"> loading the view... </span>

_e

于 2012-11-26T22:59:04.110 に答える
1

ng-show ディレクティブを使用することもできます。モデルが空かどうかを確認し、次のように DOM サブセットを表示するだけです。

    <!-- model not ready -->
    <div style="width: 200" ng-show="lines == ''">
      <div class="progress progress-striped active">
         <div class="bar" style="width: 0%;"></div>
      </div>
    </div>

    <!-- your model code -->
    <ul class="nav nav-tabs nav-stacked">
      <li ng-repeat="line in lines">
        {{line.Id}}
      </li>
    </ul>
于 2013-05-28T12:17:15.250 に答える
0

サービス呼び出しの前後に送信するブロードキャストに基づいて表示されるディレクティブを作成できます。これを $rootScope に置くことができます。したがって、一般的な POST/GET 呼び出しを処理するためにファクトリを呼び出している場合、呼び出しの直前に、"$rootScope.startLoading()" などの $rootScope の関数を呼び出すことができ、終了時に "$rootScope.これらの各メソッドは、ディレクティブでピックアップするイベントをブロードキャストします。次に、イベントをキャッチするディレクティブを処理するだけで、「scope.$on("startLoading", func(...")それを削除/非表示にするための読み込みが完了しました。

そうすれば、一般的なローディング オーバーレイを適切に表示できます。

于 2013-10-01T21:57:08.923 に答える