Angularjs:如何在 $routeProvider 中使用“解决"时显示加载图标? [英] Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?
问题描述
以下代码通过服务读取并在网页上显示特定页面类别"(字符串)的页面"对象列表.使用 $routeProvider.when() 中的解析对象属性,我可以推迟更新视图,直到新值准备就绪.
The following code reads via a service and shows on the web page a list of 'page' objects for a specific 'page category' (string). Using the resolve object property in $routeProvider.when(), I am able to postpone updating the view until the new value is ready.
两个问题:
当要求一个新的页面列表时,我想显示一个加载图标.当从服务器开始读取(并且应该显示加载图标)时,如何检测(以非黑客的方式)事件?我想我可以在服务中做一些像 $('.pages-loading-icon').show() 这样的事情,但发现它太依赖于 gui 太依赖于服务.
When asking for a new page list, I want to show a loading-icon. How can I detect (in a non-hackish way) the event when the reading from server starts (and the loading-icon should be displayed)? I guess I could do something like $('.pages-loading-icon').show() in the service, but find that to be too gui dependent too placed in the service.
当新值准备好时,我希望旧值淡出,新值淡入.执行此操作的角度"方式是什么?我曾尝试使用 $watch 在控制器中执行此操作,但这会导致在淡出开始前不久显示新值.
When the new value is ready, I would like the old to fade out and the new to fade in. What is the 'angular' way to do this? I have tried to do it in the controller using $watch, but that causes the new value to be display shortly before the fadeout starts.
代码:
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 中.
services.js: The last pages read is stored in currentPages and its category in 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>
推荐答案
不确定这是否适用于您的代码,因为您有 $resource 集成.但可能值得研究角度事件:$routeChangeStart
和 $routeChangeSuccess
.
Not exactly sure whether this would work in your code as you have $resource integration.
But it may be worth to look into angular events: $routeChangeStart
and $routeChangeSuccess
.
在 html 中:
<span ng-show="isViewLoading"> loading the view... </span>
在控制器中(它定义了上面 html 的范围):
in controller (which defines the scope of the html above):
$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
$scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
$scope.isViewLoading = false;
});
$scope.$on('$routeChangeError', function() {
$scope.isViewLoading = false;
});
这篇关于Angularjs:如何在 $routeProvider 中使用“解决"时显示加载图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!