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它可以工作，但是然后在JSON上的角度扼流圈存储在＆＃39; loc＆＃39;中。我该如何解决？我想知道我是否需要在某个地方编译，但是我不想破解ng-map而且我不知道为什么需要编译，但它可能就像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事件，而不是角度指令。

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

在您的控制器中：

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/

ng-mouseover上的ng-mouseover不会触发

2 个答案: