Angular:更改事件处理程序内部的路径无效

Question

我是angular的新手，在更改事件处理程序内部的位置时遇到问题。该处理程序用于定位在谷歌地图上的标记。我正在使用ng地图(非常棒)。

以下是创建标记的代码(这在$http get的成功回调中运行)：

for( i = 0; i < data.Pins.length; i++ )
{
var marker = new google.maps.Marker({
title: data.Pins[i].StreetAddress,
position: new google.maps.LatLng(data.Pins[i].Latitude,data.Pins[i].Longitude),
data: data.Pins[i],
index: i,
});
google.maps.event.addListener(marker, 'click', function(tgt) {
$scope.pinClicked(marker);
});
marker.setMap($scope.map);
$scope.markers.push(marker);
}

事件处理程序非常简单：

$scope.pinClicked = function(marker) {
if( marker.data.Homes.length == 1) $location.path("/home");
else $location.path("/unit");
};

当我点击一个标记时，处理程序就会执行，if/then/else语句也会执行。但是，位置不变。

这是因为我在angular的"上下文"之外，因为我通过谷歌地图设置了事件侦听器吗？

附加信息

感谢关于使用window.location的建议。我之前没有提到的是，地图是局部视图的一部分，所以我不想触发页面重新加载——我希望angular根据位置变化更新局部视图。我知道它可以做到，因为$location.path('/unity')在该事件处理程序之外工作得很好。

Answer 1

问题是Google Maps事件回调在Angular上下文外部运行。调用$location.path("...")是完全正确的(您应该NOT在Angular应用程序中使用window.location)，但您必须在Angular控制的回调中使用定位服务。这里没有这种情况。请考虑以下代码摘录：

$http.get(..., function() {
for (i = 0; i < data.Pins.length; i++) { // This is your FOR loop 
...
google.maps.event.addListener(marker, 'click', function(tgt) {
$scope.pinClicked(marker);
});

$http.get()回调(您的函数)在Angular上下文中触发；当函数返回时，Angular会触发$digest循环，更新所有绑定。它是$digest循环，将处理任何$location更改。

无论如何。。。对google.maps.event.addListener的回调稍后在Angular上下文之外触发。Angular不会看到您在回调中所做的任何范围更改或$location更改(至少不会立即看到——直到下一次$digest循环运行时才会看到，无论何时)。

您需要在$scope.$apply中结束对$scope.pinClicked(marker)的呼叫，如下所示：

google.maps.event.addListener(marker, 'click', function(tgt) {
$scope.$apply(function() {
$scope.pinClicked(marker);
});
});

通过在$scope.$apply中包装调用，您实际上已经告诉Angular，"嘿，运行这个函数中的代码，然后启动$digest循环。">