Angularjs:在$ routeProvider中使用'resolve'时如何显示loading-icon？

Question

以下代码通过服务读取,并在网页上显示特定"页面类别"(字符串)的"页面"对象列表.使用$ routeProvider.when()中的resolve对象属性,我可以推迟更新视图,直到新值准备就绪.

两个问题:

1. 在要求新的页面列表时,我想显示一个加载图标.当从服务器读取时(如果应显示加载图标),如何检测(以非hackish方式)事件？我想我可以在服务中执行类似$('.pages-loading-icon').show()的操作,但是发现它太过于依赖于服务.

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>

Answer 1

不完全确定这是否适用于您的代码,因为您有$ 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;
});