如何在对象完全加载到$ scope之前阻止DOM加载？

Posted 2021-04-14

我正在加载一个近19,000行的JSON ......缩小到一行，大约240k。我通过index.html文件将其作为全局var加载到我的应用程序中：

<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">中使用

答案

理想情况下，您的js文件应该在HTML的末尾加载，这样您就不会遇到此问题。但如果这不是你的选择，那么在控制器中添加它

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

并在您的HTML中

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

另一答案

有一个标志，指示数据何时完全加载到控制器。就像是

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