ng-map标记上的ng-mouseover不会触发

Question

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

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

..。但是，鼠标悬停并不会触发。如果我使用on-mouseover，它可以工作，但是angular会阻塞存储在'loc‘中的JSON。我该如何解决这个问题？我想知道我是否需要某个地方的编译，但是我不想hack ng-map，我也不明白为什么需要编译，但可能maps指令中的ng-mouseover没有被正确编译为Google地图可以识别的事件？

Answer 1

如果我不插入JSON，Angular就不再阻塞它，所以我可以使用on-mouseover，这是有效的：

<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事件，而不是angular指令。

正如你已经发现的，一种选择是使用on-mouseover事件，但是要注意的是，传递回你的方法的第一个对象实际上是事件本身(幸运的是它也包含了标记位置)，如果你想要角度对象，它实际上是第二个参数。

在您的控制器中：

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>

我在这里有一个简单的例子：https://embed.plnkr.co/K5LZyF/