javascript - AngularJs、ngRepeat 不起作用

Question

我正在使用 AngularJs。我正在显示带有标记的谷歌地图。单击标记后，我将显示单击的标记详细信息。

这是我的Controller.js

  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
        });
       $scope.leadsForMap=[];
       $scope.location={};
       google.maps.event.addListener(marker, 'click', function() {
       $scope.location = {
                name: name,
                sid: sid,
                address: address,
                locationId:locationId
                };
       $scope.leadsForMap.push($scope.location);
       $scope.markers.push(marker);
   }

在 html 中，我尝试循环 $scope.leadsForMap 数组并在单击后显示特定详细信息

html

    <div  data-ng-repeat="location in leadsForMap track by $index" data-ng-
    if="leadsForMap.length>0">
    {{$index+1}} {{location.name}} - {{location.sid}},{{location.address}}
    </div>   

但是即使 $scope.leadsForMap 有值，这个 div 也根本不显示。谁能告诉我哪里错了？

Answer 1

您需要使用

$scope.$apply()

当事件超出 Angular 范围时，必须使用 $scope.$apply，并且 Angular 不会运行摘要循环，因为它超出了范围。

您需要运行摘要周期，该周期将由 $scope.$apply() 手动运行

google.maps.event.addListener(marker, 'click', function() {
       $scope.location = {
             name: name,
             sid: sid,
             address: address,
             locationId:locationId
       };
       $scope.leadsForMap.push($scope.location);
       $scope.markers.push(marker);
       $scope.$apply();
}

检查When to use $scope.$apply()