如何防止在對象完全加載到$ scope中之前加載DOM？

Question

我正在加載將近19,000行的JSON ...最小化為一行約240k的行。 我通過index.html文件將其作為全局變量加載到我的應用程序中：

<script type="text/javascript" src="js/cdjson.js"></script>

var _countries = {
   "country": {
      "USA": {
         "currency": {
            "currencyCode":["USD"],
                "currencyName":["United States Dollar"],
                "currencySymbol":["&#36;"]
         },
         "info": { 
               ...
               ...
         },
         "phone" : {
               ...
         },
         "postal" : {
               ...
         }
      },
      "CAN" : {
         ...
      }
   }
}  

在控制器中，將其分配給$ scope變量$scope.countries = _countries.country ; 。 但是，當該控制器的html DOM在對象完全加載到$ scope中之前加載其嘗試訪問$ scope變量的嘗試時，會導致JS對象錯誤，例如Cannot read property 'country' of undefined 。

如何在$ scope對象完全加載之前阻止頁面呈現？ $ scope國家對象在<select ng-repeat="countries as country">

Answer 1

有一個標志，指示何時將數據完全加載到控制器。 就像是

<select ng-if="countries.length" ng-repeat="countries as country">

Answer 2

理想情況下，應該在HTML的末尾加載js文件，這樣就不會出現此問題。 但是，如果這不是您的選擇，則將其添加到控制器中

$scope.countries = []
angular.element(document).ready(function () {
    $scope.countries = _countries.country;
});

並在您的HTML中

<select ng-if="countries.length" ng-repeat="countries as country">