Angular JS-显示/隐藏每条新路线的gif

一尘不染

Angular JS-显示/隐藏每条新路线的gif

angularjs

我试图在每条新路线上切换（隐藏/显示）加载的gif，所以我的逻辑是：

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

阅读 276

2020-07-04

共1个答案

一尘不染

简短答案 ：已$rootScope.layout.loading按预期更改。但是，如果加载了模板，浏览器将没有时间使更改可见。

长答案
：如果将console.log输出放到$on侦听器中，您将看到一个$routeChangeStart事件触发，该模板被加载，然后$routeChangeSuccess触发。在后台发生以下情况：

$routeChangeStart 火灾
$rootScope.layout.loading 变成 true
模板被异步加载
DOM已更新
浏览器呈现加载的gif

稍后（xhr请求返回）

模板已加载
$routeChangeSuccess 火灾
$rootScope.layout.loading 变成 false
DOM已更新
浏览器不再显示gif

如果缓存了tmeplates会发生什么：- $routeChangeStart触发-
$rootScope.layout.loading变为true - $routeChangeSuccess触发-
$rootScope.layout.loading变为-DOM已false 更新（但这与以前的状态相同）

如您所见，浏览器无法呈现新状态，因为正在运行的脚本没有被中断，这使浏览器有时间呈现DOM。如果尚未加载模板，则ajax请求将停止脚本执行，并为浏览器提供呈现DOM的时间。

如何解决这个问题？

您可以使用timeout，让浏览器有时间更新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=preview

2020-07-04