1

각도 앱에서 Google지도 API를 사용하기 위해 NgMap 라이브러리를 사용하고 있습니다.NgMap : 마커 (ng-repeat 지시어)가 여러 매개 변수를 통과하는 이유는 무엇입니까?

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 라이브러리, 각도 또는 자바 스크립트 뉘앙스와 관련이 있습니까?

실제로 동작하는 plunker

는 여기에서 찾을 수 있습니다 : https://embed.plnkr.co/TQpm4O/

답변

1

는 일부 파고 후, 그것은 이벤트가 아닌 마커 자체의 그 무언가 intentional by NgMap. 것 같습니다. 워드 프로세서

:

이벤트, 마커, 도형을지도에 적용됩니다. 모든 이벤트 관련 속성이 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>