AngularJS 1与Google Maps API变量作用域问题：地图点击事件失效

这个问题我之前也踩过坑！核心原因是Google Maps的事件回调是运行在AngularJS的消化周期（Digest Cycle）之外的，所以你在回调里修改$scope.showBox之后，Angular并不会自动检测到这个变化，自然也就不会更新视图里的信息框状态。

给你两个靠谱的解决方案：

方案1：手动调用$scope.$apply() #

在修改$scope变量之后，手动触发Angular的消化周期，让它感知到变化：

google.maps.event.addListener(map, 'click', function (event) {
    $scope.$apply(function() {
        $scope.closeBox();
    });
});

$scope.closeBox = function () { 
    $scope.showBox = false; 
}

或者简化一点，直接在回调里调用$scope.$apply()：

google.maps.event.addListener(map, 'click', function (event) {
    $scope.closeBox();
    $scope.$apply();
});

方案2：使用$timeout服务 #

$timeout会自动帮你触发$apply，写法更简洁，还能避免手动调用$apply可能出现的“digest already in progress”错误（记得先把$timeout注入到你的控制器里）：

google.maps.event.addListener(map, 'click', function (event) {
    $timeout(function() {
        $scope.closeBox();
    });
});

$scope.closeBox = function () { 
    $scope.showBox = false; 
}

简单补充下原理：AngularJS只有在自己的上下文（比如ng-click、$http回调、$timeout等）里才会自动运行消化周期，而Google Maps这类第三方库的事件不在这个范围内，所以必须手动通知Angular去更新视图。

内容的提问来源于stack exchange，提问作者The Hawk