首页 > angularJS怎么实现请求的数据还未加载完成时展示“正在加载”的提示?

angularJS怎么实现请求的数据还未加载完成时展示“正在加载”的提示?

在点击button发出请求后,由于网络或者数据较大的原因,页面中的angularJS双向绑定数据部分不显示,页面结构很难看,怎么能实现在所有的数据加载完成之前,弹出层覆盖掉原网页并且提示“正在加载”,等所有的数据加载完成之后,再显示带有完整数据的网页。
如下面的效果:


事先做好遮罩层,发起请求时(一般都是 $http 或 $resource)显示遮罩,promise resolve 后关闭遮罩。

逻辑就是这么简单,但是因为出现的很频繁所以要考虑如何 DRY。

视图层面上,如果遮罩是全应用通用的就不要每个 route 里都写一遍,而是考虑写在比较上层的路由入口,让子路由共享。

调用层面,简单一点把遮罩状态保存在 $rootScope,使用 DI 来随取随用;讲究一点就写个 service 来控制。

遮罩本身可以封装成 directive 便于复用,不过这东西很简单,不封装也罢。


https://github.com/cgross/angular-busy/blob/master/README.md 使用这个模块

【热门文章】
【热门文章】