2013-06-11 17 views
6

Oldukça basit bir sayfam var, onu doldurmak için 2 statik json dosyası çağırıyor ve FF ve chrome'da ne fark ettiğimi hızlı görüyorsam sayfadaki çalışma zamanında etiketlerini görüyorum ve sonra bir saniye sonra güncellenir (tam anlamıyla 500ms sonra)Angular.js şablon içeriği flaşı

burada kısa bir video. Burada

http://screencast.com/t/RZhEIxKj5

burada

http://screencast.com/t/Be3JvLIYK00P

kontrolör

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"; 
     }    
    }); 
} 

neye benzediği ve burada benim json

neye benzediği

gibi şelale görünüyor budur
[ 
    { 
     "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" 
    } 
] 

cevap

10

Bu flaşı kontrol etmek için ng-cloak sınıfını kullanın. detay yardım ins açısal SSS sayfasını kontrol edin - şablonunda http://docs.angularjs.org/api/ng.directive:ngCloak

:

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

BB'de:

.ng-cloak { 
    opacity: 0; 
}