javascript - ng-repeat 在 XMLHttpRequest 中定义绑定(bind)数据时不起作用

Question

我目前有以下 html 代码...

<li ng-repeat="a in idmasVesselstableList"><a>{{a.table_name}}</a></li>

以及以下 AngularJS Controller 代码...

angular
  .module('myApp')
  .controller('idmasCtrl', ['$scope', function($scope) {

      $scope.idmasVesselstableList = [{"table_name":"api_574_structural_thickness"},{"table_name":"api_574_structural_thickness_rev_history"},{"table_name":"cml"},{"table_name":"cml_rev_history"},{"table_name":"cml_types"},{"table_name":"cml_types_rev_history"},{"table_name":"damage_mechanism"},{"table_name":"damage_mechanism_list"},{"table_name":"damage_mechanism_list_rev_history"},{"table_name":"damage_mechanism_rev_history"},{"table_name":"equipment"},{"table_name":"equipment_rev_history"},{"table_name":"inspection"},{"table_name":"inspection_rev_history"},{"table_name":"inspection_statuses"},{"table_name":"inspection_statuses_rev_history"},{"table_name":"remediation_statuses"},{"table_name":"remediation_statuses_rev_history"},{"table_name":"statuses"},{"table_name":"statuses_rev_history"}];

  }])

哪个工作正常并正确加载我的列表。

但是，当我在 XMLHttpRequest 中定义我的列表时，AngularJS 无法正确生成该列表。请参阅下面的代码...

angular
  .module('myApp')
  .controller('idmasCtrl', ['$scope', function($scope) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET","/getvesselstablelist.js", true);
      xmlhttp.onreadystatechange=function(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
           string=xmlhttp.responseText;
           $scope.idmasVesselstableList = JSON.parse(string);
         }
       }
  xmlhttp.send();
}])

任何人都知道如何在 readystatechange 上的 XXMLHttpRequest 中正确生成列表？

在此先感谢您的帮助。

Answer 1

首先使用 Angular $http AJAX 服务。 所以它将是:

$http.get("/getvesselstablelist.js").then(function(response){
   $scope.idmasVesselstableList = JSON.parse(response.data);
});

如果由于某种原因您不能使用它，请在您的 XMLHttpRequest 回调中调用 $scope.$apply。 你需要这个来告诉 Angular 范围已更新，在 Angular 代码之外。

xmlhttp.onreadystatechange=function(){
   if (xmlhttp.readyState==4 && xmlhttp.status==200){
     string=xmlhttp.responseText;
     $scope.$apply(function(){
       $scope.idmasVesselstableList = JSON.parse(string);
     });
  }
}