angular.js - 如何解决angularjs由于网速慢显示了占位符的问题？

问题描述

相信大家写angularjs都会遇到这个问题，但是一般web都还不太明显，而写了wap页面的时候就会明显有个占位符会停顿在界面刚打开的时候，然后等js异步刷新后值又变了，体验感觉就不太好了。

我觉得这个应该会有个比较成熟的解决方案了，求教一下~！

问题解答

@Broooooklyn 顺着这个hint，在stackoverflow找到一个很不错的帖子，解释很清楚

ng-bind 或ng-cloak, 官方都说了多少遍了, 用css解决是最好的 完美

http://www.cnblogs.com/whitewolf/p/3495822.html

https://docs.angularjs.org/api/ng/directive/ngCloak

[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important;}

请使用ng-bind

angularjs 是会自动配合 $qProvider 的，其实就是底层的 $digest 循环。

当 $q 的 promise 的 reject 或者 resolve 没有执行的时候，试图就不会渲染，就更不会初选占位符的问题。angularjs 的 router 模块，中可以通过定义 resolve 来使用这个功能。 angular-ui-router 使用同理。

不要使用 {{ }} 占位符，使用 ng-bind 指令。但是这种方案不灵活。比如，使用 {{ }} 写法可以这样

html<p>{{ start_time }} ~ {{ end_time }}</p>

但是使用 ng-bind 指令后就只能这样了。

<p> <span ng-bind='start_time'></span> ~ <span ng-bind='start_time'></span></p>

会出现一大堆没用的空标签。不利于维护。而且页面会出现空白。

推荐使用第一种方案。但是第一种也有一个缺点，就是当数据返回比较慢的时候，视图回白板，不过还是有发给发的。在页面切换的时候可以使用 ng-animate 加上 loading 动画就好了。

router.js angular-ui-router 模块示例代码如下

javascript.state(’admin.event’, { url: ’/events’, views: {’MainBody’: { // 重点在这里 templateUrl: ’.....’, controller: ’dzadmin.controller.events.query’, //这里需要制定控制器名称，视图里不要在再制定了。因为是有 路由器 负责告诉控制器合适开始执行，而不是试图来驱动。 resolve: {events: [’eventService’, ’$q’, function(eventService, $q){ var deferred = $q.defer(); eventService.query(.....).then(deferred.resolve, deferred.reject); return deferred.promise;}] }} }})// dzadmin.controller.events.query.controller(’dzadmin.controller.events.query’, [’$scope’, ’events’, function($scope, events){ $scope.events = events;}])

// 试图代码一定要注意，视图里面不能再重复指定控制器名称。否则会报错，应为路由中已经指定了控制器名。

<ul> <li ng-repeat='event in events'>{{ event.name }}</li></ul>