Javascript 通过单击Google地图标记切换ngShow属性

我试图通过点击地图上的一个标记，在谷歌地图旁边的

上切换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上：

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

---

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

您的切换方法应包装在$scope中。$apply将了解更改并更新接口。因此，您的切换方法将如下所示

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

---

以下代码中的事件处理程序函数处于“Angular的世界之外”，这意味着$digest循环将不会被触发，并且直到不会在DOM中反映更改：

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

您需要使用：

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

例如：

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

演示：