NgMap：为什么我的标记（ng-repeat 指令）要通过多个参数传递？

Question

我正在使用 NgMap 库在我的 angular 应用程序中使用 google 地图 api。

我正在使用 ng-repeat 指令添加标记，每个标记都有一个调用控制器并记录到控制台的点击标签。

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker ng-repeat="p in vm.positions"
    position="{{p.pos}}"
    on-click="vm.showData(p)" //this is my on-click event, passing through the ng-repeated object
    title="pos: {{p.pos}}"></marker>
</ng-map>

出于某种原因，每次我将参数传递给我的控制器函数时，实际上传递的是标记对象，而不是我从视图传递的参数。

 vm.showData = function (marker, param){
      console.log(marker) //WHY IS MARKER BEING PASSED THROUGH?!
      console.log(param.name); //THE SECOND ARGUMENT IS THE ONE I WANT, WHY ISN'T IT THE FIRST?
 }

最终，在我的头撞到墙上之后，我决定检查是否有任何其他参数被传递给控制器函数。瞧瞧，第二个参数是我希望通过的参数。

为什么第一个参数不是我所期待的？！ 是不是与 ngMap 库有关，angular，或者只是 javascript 我不知道的细微差别？

可以在这里找到一个工作的 plunker：https://embed.plnkr.co/TQpm4O/

Answer 1

经过一些挖掘，它看起来像它的东西intentional by NgMap.它是一个事件，而不是标记本身。

来自文档：

Events are applied to map, markers, and shapes. All event-related attributes are preceded by 'on-', i.e. on-click, on-mouseover, etc

附带说明一下，要从 NgMap 中获取实际的标记对象，您可以使用 this.

所以你的代码也可以像这样。

angular.module('ngMap').controller('MyCtrl', function() {
    var vm=this;
    vm.data =[
      {foo:1, bar:1},
      {foo:2, bar:2},
      {foo:3, bar:3},
      {foo:4, bar:4},
      {foo:5, bar:5},
      {foo:6, bar:6},
      {foo:7, bar:7}
    ];
    vm.positions =[
      {pos:[40.71, -74.21], name: "dave 1" },
      {pos:[40.72, -74.20], name: "dave 2" },
      {pos:[40.73, -74.19], name: "dave 3" },
      {pos:[40.74, -74.18], name: "dave 4" },
      {pos:[40.75, -74.17], name: "dave 5" },
      {pos:[40.76, -74.16], name: "dave 6" },
      {pos:[40.77, -74.15], name: "dave 7" }
    ];
    vm.showData = function (event){
      console.log(this.position.lat());
      console.log(this.position.lng());
      console.log(this.title);
    }
  });

<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>

<body>
  <div ng-controller="MyCtrl as vm">
    <ng-map zoom="11" center="[40.74, -74.18]">
      <marker ng-repeat="p in vm.positions"
        position="{{p.pos}}"
        on-click="vm.showData()"
        title="pos: {{p.name}}"></marker> 
        <!-- Changed p.pos to p.name --> 
        <!-- You can even remove p from vm.showData() -->
    </ng-map>
  </div>
</body>
</html>

NgMap：为什么我的标记（ng-repeat 指令）要通过多个参数传递？

NgMap: Why are my markers (ng-repeat directive) passing through multiple parameters?

javascript

google-maps

angularjs

angularjs-ng-repeat

angularjs-google-maps