ng-鼠标悬停在ng-map标记上不会触发

Question

我有一个ng-map（使用流行的ng-map库来实现带有angularjs的Google地图）：

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker ng-mouseover="mapsCtrl.handleMarkerMouseover({{loc}})"
        ...
</ng-map>

。但是鼠标悬停不会触发。如果我使用鼠标悬停，它可以工作，但随后存储在"loc"中的 JSON 上会出现角度阻塞。我该如何解决这个问题？我想知道我是否需要在某处进行编译，但是我不想破解 ng-map，也不明白为什么需要编译，但就像标记指令中的 ng-mouseover 没有正确编译为 Google 地图可以识别的事件？

Answer 1

如果我不插值 JSON，Angular 不再窒息，所以我可以使用鼠标悬停，这有效：

<ng-map>
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker on-mouseover="mapsCtrl.handleMarkerMouseover(loc)"
        ...
</ng-map>

Answer 2

我知道

你已经回答了你自己的问题，但我一直在为同样的问题而苦苦挣扎，还有一些额外的观点！

NgMap 库只是 Google Maps API 的包装器，这意味着事件仍然是 API 使用的 JavaScript 事件，而不是角度指令。

正如您所发现的，一种选择是使用鼠标悬停事件，但是需要注意的一点是，传递回方法的第一个对象实际上是事件本身（幸运的是也包含标记位置），如果您想要角度对象，它实际上是第二个参数。

在控制器中：

vm.positions = [
  {pos:[40.71, -74.21], name: "marker 1" },
  {pos:[40.72, -74.20], name: "marker 2" },
  {pos:[40.73, -74.19], name: "marker 3" },
];
//NOTE THE TWO ARGUMENTS FOR THIS METHOD
vm.myMethod = function (event, angularObj)
{
    console.log(event.latLng); //The Event contains the latLng
    console.log(angularObj.name)
}

在您看来：

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker ng-repeat="p in vm.positions"
    position="{{p.pos}}"
    /* NOTE THE USE OF ON-CLICK AND THE ANGULAR OBJECT BEING PASSED IN 
    THAT WILL ACTUALLY BE THE SECOND ARGUMENT FOR THE METHOD IN YOUR CONTROLLER */
    on-click="vm.logData(p)" 
    title="pos: {{p.pos}}"></marker>
</ng-map>

我在这里有一个 plunk 演示了这一点：https://embed.plnkr.co/K5LZyF/