AngularJs中ngRepeat失效问题：Google地图Marker点击详情异常

我来帮你排查并解决这个ngRepeat无法正常工作的问题，结合你提供的代码来看，主要有两个核心问题需要修复：

1. Google Maps事件脱离AngularJS的消化周期 #

Google Maps的click事件监听器是运行在AngularJS上下文之外的，当你在这个回调里修改$scope上的数据时，Angular无法自动检测到这些变化，自然不会更新视图（包括ngRepeat绑定的内容）。

修复方法：
在修改$scope数据后，手动触发Angular的消化周期，推荐使用$timeout（它会自动处理消化周期的时机，避免"digest already in progress"的报错），或者直接调用$scope.$apply()。记得要在控制器中注入$timeout依赖。

2. 每次创建标记都会清空数据数组 #

你在createMarker函数开头写了$scope.leadsForMap=[];，这意味着每创建一个标记，就会把之前存储的标记信息全部清空，ngRepeat自然没有数据可以渲染。

修复方法：
把数组初始化的代码移到控制器的初始化阶段，只执行一次，确保后续添加的标记信息能累积在数组中。

// 控制器初始化阶段，只初始化一次数据数组和location对象
$scope.leadsForMap = [];
$scope.location = {};

function createMarker(latitude, longitude, name, address, locationId, sid) { 
  var marker = new google.maps.Marker({ 
    map: $scope.map, 
    position: new google.maps.LatLng(latitude, longitude), 
    title: name 
  }); 

  google.maps.event.addListener(marker, 'click', function() { 
    // 将当前标记的详细信息添加到数组中（供ngRepeat渲染）
    $scope.leadsForMap.push({ 
      name: name, 
      sid: sid, 
      address: address,
      locationId: locationId
    });

    // 同时更新单个location对象（如果需要展示单条详情）
    $scope.location = { 
      name: name, 
      sid: sid, 
      address: address,
      locationId: locationId
    };

    // 用$timeout触发Angular消化周期，更新视图
    $timeout(function() {});
    // 或者用$apply（注意可能的digest冲突）：
    // if (!$scope.$$phase) {
    //   $scope.$apply();
    // }
  }); 
}

确保你的HTML中ngRepeat的绑定是正确的，比如：

<!-- 渲染所有点击过的标记详情 -->
<div ng-repeat="item in leadsForMap" class="marker-detail">
  <h4>{{item.name}}</h4>
  <p>{{item.address}}</p>
  <p>Location ID: {{item.locationId}}</p>
</div>

<!-- 渲染当前点击的单个标记详情 -->
<div class="current-marker" ng-if="location.name">
  <h3>当前选中：{{location.name}}</h3>
  <p>{{location.address}}</p>
</div>

内容的提问来源于stack exchange，提问作者Sachin HR