Angular.js flash del contenuto del modello

Question

Ho una pagina piuttosto semplice, chiama 2 file json statici per popolarlo e quello che sto notando in FF e chrome se sembro veloce è che vedo i tag in fase di esecuzione nella pagina e poi vengono aggiornati un secondo dopo (letteralmente 500ms dopo)

ecco un breve video.

http://screencast.com/t/RZhEIxKj5

qui è ciò che la cascata sembra

http://screencast.com/t/Be3JvLIYK00P

qui è ciò che il controller sembra

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

e qui è quello che il mio JSON sembra

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

Utilizzare la classe ng-cloak per controllare questo flash. Controllare dettaglio aiuto ins pagina delle FAQ di angolare - http://docs.angularjs.org/api/ng.directive:ngCloak

in Template:

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

In CSS:

.ng-cloak { 
    opacity: 0; 
}