个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 14:56:20 25 4
gpt4 key购买 nike

我正在使用 NgMap 库在我的 Angular 应用程序中使用 google maps api。

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

<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>

出于某种原因，每次我将参数传递给我的 Controller 函数时，它实际上传递的是标记对象，而不是我从 View 传递的参数。

 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?
 }

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

为什么第一个参数不是我所期望的？!是与 ngMap 库、 Angular 有关，还是只是我不知道的 javascript 细微差别？ p>

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

最佳答案

经过一些挖掘，它看起来像是某种东西 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>

关于javascript - 吴 map : Why are my markers (ng-repeat directive) passing through multiple parameters?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47227971/

25 4 0
文章推荐： c - 如何识别 USB ISO 传输中用于 CRC(校验和)的数据字节？
文章推荐： c# - Microsoft ReportViewer 2012 引用
文章推荐： c# - 在 Windows 服务中处理 AppDomain.CurrentDomain.UnhandledException
文章推荐： javascript - 抑制 d3plus 方框和晶须绘图中的极端异常值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com