Angular js - 显示/隐藏每条新路线的加载 gif [英] Angular js - show/hide loading gif every new route
问题描述
我试图在每条新路线上切换(隐藏/显示)加载 gif,所以我的逻辑是:
I'm trying to toggle (hide/show) a loading gif on every new route, so my logic would be:
- routeChangeStart = 显示加载 gif
- routeChangeSuccess = 隐藏加载 gif
这是我的代码:
//ANGULAR
app.run(function($rootScope) {
$rootScope.layout = {};
$rootScope.layout.loading = false;
$rootScope.$on('$routeChangeStart', function() {
//show loading gif
$rootScope.layout.loading = true;
});
$rootScope.$on('$routeChangeSuccess', function() {
//hide loading gif
$rootScope.layout.loading = false;
});
$rootScope.$on('$routeChangeError', function() {
//hide loading gif
alert('wtff');
$rootScope.layout.loading = false;
});
});
//HTML
<img src="img/loading.gif" ng-hide="!layout.loading"/>
这很奇怪,因为这适用于更改了 3/4 条路线,然后在更改路线时停止工作:O
可能是什么?
感谢@Rob Sedgwick,这是一个活生生的例子:http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b
HERE IS A LIVE EXAMPLE thanks to @Rob Sedgwick : http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b
推荐答案
Short answer:$rootScope.layout.loading
更改为预期的.但是,如果加载了模板,浏览器就没有时间使更改可见.
Short answer: the $rootScope.layout.loading
changed as expected. But if the templates are loaded the browser has no time to make the changes visible.
长答案:如果你把 console.log
输出放在你的 $on
监听器中,你会看到,$routeChangeStart
事件触发,模板被加载,然后 $routeChangeSuccess
触发.在幕后发生以下情况:
Long answer: if you put console.log
outputs in your $on
listeners you will see, that a $routeChangeStart
event fires, the template is loaded and after that $routeChangeSuccess
fires. Under the hood the following happens:
$routeChangeStart
触发$rootScope.layout.loading
变为true
- 模板异步加载
- DOM 已更新
- 浏览器呈现加载的 gif
稍后(xhr 请求返回)
a little bit later (the xhr request returns)
- 模板已加载
$routeChangeSuccess
触发$rootScope.layout.loading
变为false
- DOM 已更新
- 浏览器不再显示 gif
如果 tmeplates 被缓存会发生什么:- $routeChangeStart
触发- $rootScope.layout.loading
变为 true
- $routeChangeSuccess
触发- $rootScope.layout.loading
变成 false
- DOM 已更新(但与之前的状态相同)
what happens if the tmeplates are cached:
- $routeChangeStart
fires
- $rootScope.layout.loading
becomes true
- $routeChangeSuccess
fires
- $rootScope.layout.loading
becomes false
- the DOM is updated (but this is the same state as before)
正如您所看到的,浏览器无法呈现新状态,因为脚本正在运行而不会中断,从而为浏览器提供了呈现 DOM 的时间.如果模板尚未加载,ajax 请求会停止脚本执行并给浏览器时间来呈现 DOM.
As you can see the browser can not render the new state because a script is running that is not interrupted to give the browser time to render the DOM. If the template is not yet loaded, the ajax requests stops the script execution and give's the browser time to render the DOM.
如何解决这个问题?
您可以使用 timeout
给浏览器时间来更新 DOM:
You can use a timeout
that give's the browser time to update the DOM:
$rootScope.$on('$routeChangeSuccess', function () {
console.log('$routeChangeSuccess');
//hide loading gif
$timeout(function(){
$rootScope.layout.loading = false;
}, 200);
});
这是您使用此解决方案的 plunkr:http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=预览
Here is your plunkr with this solution: http://plnkr.co/edit/MkREo0Xpz5SUWg0lFCdu?p=preview
这篇关于Angular js - 显示/隐藏每条新路线的加载 gif的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!