@Broooooklyn 順著這個(gè)hint，在stackoverflow找到一個(gè)很不錯(cuò)的帖子，解釋很清楚

ng-bind 或ng-cloak, 官方都說(shuō)了多少遍了, 用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;
}

請(qǐng)使用ng-bind

angularjs 是會(huì)自動(dòng)配合 $qProvider 的，其實(shí)就是底層的 $digest 循環(huán)。

方案一

當(dāng) $q 的 promise 的 reject 或者 resolve 沒(méi)有執(zhí)行的時(shí)候，試圖就不會(huì)渲染，就更不會(huì)初選占位符的問(wèn)題。angularjs 的 router 模塊，中可以通過(guò)定義 resolve 來(lái)使用這個(gè)功能。 angular-ui-router 使用同理。

方案二

不要使用 {{ }} 占位符，使用 ng-bind 指令。但是這種方案不靈活。
比如，使用 {{ }} 寫(xiě)法可以這樣

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

但是使用 ng-bind 指令后就只能這樣了。

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

會(huì)出現(xiàn)一大堆沒(méi)用的空標(biāo)簽。不利于維護(hù)。而且頁(yè)面會(huì)出現(xiàn)空白。

推薦使用第一種方案。但是第一種也有一個(gè)缺點(diǎn)，就是當(dāng)數(shù)據(jù)返回比較慢的時(shí)候，視圖回白板，不過(guò)還是有發(fā)給發(fā)的。在頁(yè)面切換的時(shí)候可以使用 ng-animate 加上 loading 動(dòng)畫(huà)就好了。

router.js router.js angular-ui-router 模塊示例代碼如下

javascript.state('admin.event', {
    url: '/events',
    views: {
        'MainBody': {
            // 重點(diǎn)在這里
            templateUrl: '.....',
            controller: 'dzadmin.controller.events.query', //這里需要制定控制器名稱(chēng)，視圖里不要在再制定了。因?yàn)槭怯?路由器 負(fù)責(zé)告訴控制器合適開(kāi)始執(zhí)行，而不是試圖來(lái)驅(qū)動(dòng)。
            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;
}])

// 試圖代碼
一定要注意，視圖里面不能再重復(fù)指定控制器名稱(chēng)。否則會(huì)報(bào)錯(cuò)，應(yīng)為路由中已經(jīng)指定了控制器名。

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