当前位置: 首页 > 面试题库 >

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

吴开宇
2023-03-14
问题内容

我试图在每条新路线上切换(隐藏/显示)加载的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


问题答案:

简短答案 :已$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



 类似资料:
  • 对于 被选中的国家 ,只显示 输入线 或者 输出线   只显示输入线   只显示输出线 controller.showInOnly(true); controller.showInOnly(false); controller.showOutOnly(true); controller.showOutOnly(false);

  • 主要内容:实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦! 因为时间是宝贵的,我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和

  • 排除不显示字段 Model.findAll({ attributes: { exclude: ['baz'] } });

  • 提供显示/隐藏元素的功能。 标题 内容 类型 通用 支持布局 responsive,fixed-height,fill,container,fixed 所需脚本 https://c.mipcdn.com/static/v2/mip-toggle/mip-toggle.js 示例 基本使用 你可以使用事件 toggle, show 或 hide 以控制 mip-toggle 组件的显示与隐藏。 <b

  • 问题内容: 按下后如何隐藏“编辑”链接?当我按下编辑键时,是否还可以隐藏“ lorem ipsum”文本? 问题答案:

  • 问题内容: 我可以用 但这也会删除标签。我可以以任何方式绘制刻度标签,但不能绘制刻度和书脊 问题答案: 您可以使用(http://matplotlib.org/api/axes_api.html#matplotlib.axes.Axes.tick_params)将刻度长度设置为0 :