摘要
在使用{{}}綁定數(shù)據(jù)的時(shí)候，頁面加載會出現(xiàn)滿屏盡是{{xxx}}的情況。數(shù)據(jù)還沒響應(yīng)，但頁面已經(jīng)渲染了。這是因?yàn)闉g覽器和angularjs渲染頁面都需要消耗一定的時(shí)間，這個間隔可能很小，甚至讓人感覺不到，這種情況一切正常，但這個時(shí)間也可能很長，這時(shí)候用戶可能會看到滿屏盡是{{xxxx}}。這種情況被叫做“Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.”。
問題
為了圖方便，我們很喜歡使用下面的做法
<div> {{name}} </div>但這也為滿屏盡是{{}}埋下了坑。當(dāng)接口，網(wǎng)絡(luò)響應(yīng)速度夠快的情況下，很難發(fā)現(xiàn)這個問題，但放在移動端4g或者網(wǎng)絡(luò)環(huán)境更差的情況下，這個問題就會頻發(fā)。
解決辦法
1、ng-cloak
該指令是angularjs的內(nèi)置的指令，它的作用是隱藏所有被它包含的元素。在瀏覽器加載和編譯渲染完成后，angularjs會自動刪除ngCloak元素屬性，這樣這個元素就會變?yōu)榭梢姷摹?/p>
<div ng-cloak> {{name}} </div>2、ng-bind
該指令是angularjs內(nèi)置的用于綁定頁面數(shù)據(jù)的指令。可以使用該指令代替{{}}的方式綁定數(shù)據(jù)到頁面上。使用ng-bind可以防止未被渲染的{{}}展示給用戶。如下所示：
<div ng-bind="name"> </div>
3、resolve
當(dāng)使用routes路由的時(shí)候，resolve可以防止我們在route路由被完全加載之前獲取我們需要加載的數(shù)據(jù)，當(dāng)數(shù)據(jù)被加載成功之后，路由再改變而頁面也會呈現(xiàn)給用戶，數(shù)據(jù)沒有加載成功route不會改變。
可以參考
//www.companysz.com/article/107905.htm
angular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider .when('/account', { controller: 'AccountCtrl', templateUrl: 'views/account.html', resolve: { // We specify a promise to be resolved account: function($q) { var d = $q.defer(); $timeout(function() { d.resolve({ id: 1, name: 'Ari Lerner' }) }, 1000); return d.promise; } } })});resolve 項(xiàng)需要一個key/value對象，key是resolve依賴的名稱，value可以是一個字符串（as a service）或者一個返回依賴的方法。
resolve is very useful when the resolve value returns a promise that becomes resolved or rejected.
當(dāng)路由加載的時(shí)候，resolve參數(shù)里的keys可以作為可注入的依賴：
ngular.module('myApp').controller('AccountCtrl', function($scope, account) { $scope.account = account;});我們同樣可以使用resolve key傳遞$http方法返回的結(jié)果，as $http returns promises from it's method calls:
angular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider .when('/account', { controller: 'AccountCtrl', templateUrl: 'views/account.html', resolve: { account: function($http) { return $http.get('http://example.com/account.json') } } })推薦定義一個獨(dú)立的service的方式來使用resolve key，并且使用service來相應(yīng)返回所需的數(shù)據(jù)（這種方式更容易測試）。要這樣處理的話，我們需要創(chuàng)建一個service：
首先，看一下accountService，
angular.module('app').factory('accountService', function($http, $q) { return { getAccount: function() { var d = $q.defer(); $http.get('/account') .then(function(response) { d.resolve(response.data) }, function err(reason) { d.reject(reason); }); return d.promise; } }})定義好service之后我們就可以使用這個service來替換上面代碼中直接調(diào)用$http的方式了：
ngular.module('myApp', ['ngRoute']).config(function($routeProvider) { $routeProvider .when('/account', { controller: 'AccountCtrl', templateUrl: 'views/account.html', resolve: { // We specify a promise to be resolved account: function(accountService) { return accountService.getAccount() } } })新聞熱點(diǎn)
疑難解答
