2013-06-11 26 views
6

Tôi có một trang khá đơn giản, nó gọi 2 tệp json tĩnh để điền vào nó và những gì tôi thấy trong FF và chrome nếu tôi nhìn nhanh là tôi thấy các thẻ khi chạy trong trang và sau đó chúng được cập nhật một giây sau đó (nghĩa là 500ms sau)Angular.js flash của nội dung mẫu

đây là một đoạn video ngắn.

http://screencast.com/t/RZhEIxKj5

đây là những gì các thác nước trông giống như

http://screencast.com/t/Be3JvLIYK00P

đây là những gì bộ điều khiển trông giống như

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

và đây là những gì json của tôi trông giống như

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

Trả lời

10

Sử dụng ng-cloak lớp để điều khiển flash này. Kiểm tra chi tiết giúp đỡ ins trang FAQ góc của - http://docs.angularjs.org/api/ng.directive:ngCloak

Trong mẫu:

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

Trong CSS:

.ng-cloak { 
    opacity: 0; 
} 
Các vấn đề liên quan