AngularJS集成Google Maps加载远程API JSON渲染标记报错咨询

• 作用域绑定混乱：你初始化时将testData挂在controller实例points下，请求成功后又赋值给$scope.testData，两个变量分属不同作用域，遍历的时候找不到对应变量就会抛出未定义错误
• 异步时序问题：$http请求是异步执行的，如果你在发起请求后立刻执行遍历逻辑，此时请求还未返回，就算作用域绑定正确，也会出现数据为空的问题；如果你写的遍历代码没有加作用域前缀，会直接去全局作用域找testData变量，触发未定义报错
• 变量引用错误：遍历的时候没有加对应的作用域前缀，直接使用testData进行遍历，JS会优先在当前作用域、上级作用域直到全局作用域查找该变量，找不到就会抛出错误

1. 统一变量作用域：不要混合使用controller实例和$scope挂载变量，全程用同一种绑定方式
2. 调整逻辑执行时序：将生成标记的遍历逻辑放到$http的请求成功回调中执行，确保拿到远程数据后再遍历
3. 遍历添加作用域前缀：遍历的时候必须带上变量所属的作用域前缀，不要直接使用testData

方案1：使用controller as语法（匹配你现有初始化代码） #

app.controller('MapController', ['$http', function($http) {
  var points = this;
  points.testData = [];

  // 发起远程请求
  $http.get('https://api.jsonbin.io/b/61361f26dfe0cf16eb55fd9f')
    .then(function(res) {
      // 统一赋值给points下的testData
      points.testData = res.data;
      // 拿到数据后再执行标记生成逻辑
      points.renderMapMarkers();
    })
    .catch(function(err) {
      console.log('数据拉取失败：', err);
    })

  // 标记生成方法
  points.renderMapMarkers = function() {
    // 遍历时带作用域前缀points
    for(var i = 0; i < points.testData.length; i++) {
      var markerItem = points.testData[i];
      // 调用你原有生成标记的方法
      createHighlighter(markerItem.lat, markerItem.lng, markerItem.info);
    }
  }
}])

对应的模板绑定需要使用points前缀，示例：

<div ng-controller="MapController as points">
  <!-- 地图容器 -->
  <div id="map-container"></div>
</div>

方案2：使用$scope绑定 #

app.controller('MapController', ['$scope', '$http', function($scope, $http) {
  $scope.testData = [];

  $http.get('https://api.jsonbin.io/b/61361f26dfe0cf16eb55fd9f')
    .then(function(res) {
      $scope.testData = res.data;
      $scope.renderMapMarkers();
    })

  $scope.renderMapMarkers = function() {
    for(var i = 0; i < $scope.testData.length; i++) {
      var markerItem = $scope.testData[i];
      createHighlighter(markerItem.lat, markerItem.lng, markerItem.info);
    }
  }
}])

内容的提问来源于stack exchange，提问作者Tshepo Mboweni