Question

我正在尝试通过点击地图上的标记来切换与Google地图<section>相邻的<div>上的ng-show。基本上我希望点击标记的行为类似于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事件有关？

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

Answer 1

你的toggle方法应该包含在$ 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);
  });
}

Answer 2

以下代码中的事件处理函数生活在“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

通过单击Google Map标记切换ngShow属性

2 个答案: