通过单击 Google 地图标记来切换 ngShow 属性答案

【问题标题】：Toggling ngShow attribute by clicking a Google Map marker通过单击 Google 地图标记来切换 ngShow 属性
【发布时间】：2014-04-29 07:02:58
【问题描述】：

我正在尝试通过单击地图上的标记来切换与 Google 地图 <div> 相邻的 <section> 上的 ng-show。本质上，我希望单击标记的行为类似于ng-click="toggle()"。

当我单击标记时，真/假值会正确记录到控制台，但 ng-show 似乎没有捡起它。

.controller('MapController', ['$scope',
    function($scope) {
      // $scope.visible = true;

      $scope.toggle = function(){
        console.log("Value before clicking: "+$scope.visible);
        $scope.visible = !$scope.visible;
        console.log("Value after clicking: "+$scope.visible);
      }

      $scope.buildMap = function(){
        var mapStyle=[
         // Map styles
        ];

      var myLatLng = new google.maps.LatLng(40.748453,-73.995548);

      var mapOptions = {
        // Map options
      };

      var myMap = new google.maps.StyledMapType(mapStyle,{name: "My Map"});

      var map = new google.maps.Map(document.getElementById('canvas'),mapOptions);
      map.mapTypes.set('myMapStyled', myMap);
      map.setMapTypeId('myMapStyled');

      var myMarker = new google.maps.Marker({
        map: map, position: myLatLng, title: "I’m Here"
      });

      google.maps.event.addListener(myMarker, 'click', function(e){
        $scope.toggle();
      });
    };
  }
])

它在 Plunker 上：http://plnkr.co/edit/z2UCTvqqWh04ZElu6npg?p=preview

这是与 Angular 有关，还是与 Maps API 事件有关？

另外，通过将整个东西推到控制器中来加载 Maps API 是否不明智？

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

以下代码中的事件处理函数位于“Angular 的世界之外”，这意味着 $digest 循环不会被触发，并且不会在 DOM 中反映之前发生变化：

google.maps.event.addListener(myMarker, 'click', function(e){
 $scope.toggle();
});

你需要使用$apply:

$apply() 用于从外部以角度执行表达式角度框架。（例如来自浏览器 DOM 事件， setTimeout、XHR 或第三方库）。因为我们正在呼唤我们需要执行适当的范围生命周期的角度框架异常处理，执行手表。

例子：

google.maps.event.addListener(myMarker, 'click', function(e){
  $scope.$apply(function () {
    $scope.toggle();
  });
});

演示：http://plnkr.co/edit/cB2K31mSR7VmIAvC72WM?p=preview

【讨论】：

【解决方案2】：

您的切换方法应该包含在 $scope.$apply 中，以便 Angular 能够感知更改并更新界面。所以你的切换方法看起来像这样

$scope.toggle = function(){
  $scope.$apply(function() {
    console.log("Before clicking toggle: "+$scope.visible);
    $scope.visible = !$scope.visible;
    console.log("After clicking toggle: "+$scope.visible);
  });
}

【讨论】：