Question

我是角色新手，在更改事件处理程序内部的位置时遇到问题。处理程序用于放置在谷歌地图上的标记。我正在使用ng-map（这非常棒）。

这里是创建标记的代码（这在$ 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语句。但是，位置不会改变。

这是因为我在＆＃34; context＆＃34;之外？因为我通过谷歌地图设置了事件监听器吗？

其他信息

关于使用window.location的建议。我之前没有提到的是地图是局部视图的一部分，所以我不想触发页面重新加载 - 我希望角度根据位置变化更新局部视图。我知道它可以做到，因为$ location.path（＆＃39; / unit＆＃39;）在该事件处理程序之外工作正常。

Answer 1

问题是Google Maps事件回调在Angular上下文外部运行。调用$location.path("...")是完全正确的（您应该在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位置更改。

HOWEVER ...在Angular上下文之外，google.maps.event.addListener的回调会稍后触发。 Angular不会在该回调中看到任何范围更改或$location更改（至少，不会立即 - 直到下一次$ digest周期运行时，无论何时发生）。

您需要将来电$scope.pinClicked(marker)打包到$scope.$apply内，如下所示：

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

通过将调用包装在$scope.$apply中，你基本上告诉Angular，“嘿，在这个函数中运行代码，然后启动$ digest循环。”

Angular：更改事件处理程序内的路径无法正常工作

1 个答案: