javascript - 通过点击谷歌地图标记切换 ngShow 属性

Question

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

当我单击标记时，true/false 值正确地记录到控制台，但是 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 事件有关？

另外，通过将整个东西塞进 Controller 来加载 Maps API 是不明智的吗？

Answer 1

以下代码中的事件处理函数存在于“Angular 的世界之外”，这意味着 $digest 循环不会被触发，并且会发生变化，直到不反射(reflect)在 DOM 中:

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

您需要使用 $apply :

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

例子:

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

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