Angular.js Flash der Vorlage Inhalt

Question

Ich habe eine ziemlich einfache Seite, ruft sie 2 statische JSON-Dateien zu füllen, und was ich in FF und Chrom bemerke, wenn ich schnell aussehen ist, dass ich die Tags zur Laufzeit auf der Seite sehe und dann werden sie eine Sekunde später aktualisiert (buchstäblich 500ms später)

Hier ist ein kurzes Video.

http://screencast.com/t/RZhEIxKj5

hier ist das, was der Wasserfall

http://screencast.com/t/Be3JvLIYK00P

hier ist das, was der Controller sieht aus wie

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

und hier ist das, was meine Json wie

sieht wie

sieht

[ 
    { 
     "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

Verwenden Sie die Klasse ng-cloak, um diesen Blitz zu steuern. Überprüfen Detail Hilfe ins Winkel der FAQ-Seite - http://docs.angularjs.org/api/ng.directive:ngCloak

In Vorlage:

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

In CSS:

.ng-cloak { 
    opacity: 0; 
}