Angular.js模板內容的閃光

Question

我有一個相當簡單的頁面，它調用2個靜態json文件來填充它，以及我在FF和chrome中注意到的內容（如果我看起來很快）是我在頁面的運行時看到了這些標記然後他們稍後更新（字面上500毫秒後）

這裏是一個簡短的視頻。

http://screencast.com/t/RZhEIxKj5

這裏是瀑布的樣子

http://screencast.com/t/Be3JvLIYK00P

這裏是控制器類似

function HotelsController($scope, $http) { 
    $http.get('data/hotels.json').then(function(res){ 
    $scope.hotels = res.data;     
    }); 
} 


function ConfirmationsController($scope, $http) { 
    $http.get('data/confirmations.json').then(function(res){ 
    $scope.confirmations = res.data; 
    if ($scope.confirmations.length > 0) { 
     $scope.showConfirmations = "1"; 
     } 
    else { 
     $scope.showConfirmations = "0"; 
     }    
    }); 
} 

這裏是我的JSON看起來像

[ 
    { 
     "nights": 2, 
     "hotel": "Hotel McCormick Place", 
     "confirmationNumber": "2345J453", 
     "checkIn": "18-Dec", 
     "checkOut": "20-Dec", 
     "roomType": "King, None-Smoking" 
    }, 
    { 
     "nights": 1, 
     "hotel": "ABC Inn", 
     "confirmationNumber": "1234567", 
     "checkIn": "20-Dec", 
     "checkOut": "21-Dec", 
     "roomType": "Standard, None-Smoking" 
    } 
] 

[ 
    { 
     "name": "Empire Hotels", 
     "img": "http://placehold.it/96x64", 
     "address": "123 Main Street, Texas" 
    }, 
    { 
     "name": "Lemon Tree Hotel", 
     "img": "http://placehold.it/96x64", 
     "address": "123 Main Street, Texas" 
    }, 
    { 
     "name": "Palm Fiber", 
     "img": "http://placehold.it/96x64", 
     "address": "123 Main Street, Texas" 
    } 
] 

Answer 1

使用ng-cloak類來控制此閃光燈。查看詳細幫助插件角的FAQ頁面 - http://docs.angularjs.org/api/ng.directive:ngCloak

模板：

<div ng-app class="ng-cloak"> 
    … 
</div> 

在CSS：

.ng-cloak { 
    opacity: 0; 
}