Question

我使用NgMap库在我的角应用程序中使用google maps 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库有关，有角度，或只是一个javascript的细微差别我＆＃39;我不知道？

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

Answer 1

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

来自文档：

事件适用于地图，标记和形状。所有与事件相关的属性都以'on-'开头，即点击鼠标，鼠标悬停等

作为旁注，要从NgMap获取实际的标记对象，可以使用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>

CloudStorageAccount account = CloudStorageAccount.Parse(StorageConnectionString);
var client = account.CreateCloudBlobClient();
var container = client.GetContainerReference(containerName.ToLower());
var blobs = await MediaService.GetBlobsListAsync(container);


public static async Task<IList<CloudBlockBlob>> GetBlobsListAsync(CloudBlobContainer container)
        {
            try
            {
                var allBlobsList = new List<CloudBlockBlob>();
                BlobContinuationToken token = null;

                do
                {
                    var result = await container.ListBlobsSegmentedAsync(token);
                    if (result.Results.Count() > 0)
                    {
                        var blobs = result.Results.Select(item => item as CloudBlockBlob);
                        allBlobsList.AddRange(blobs.ToList());
                    }
                    token = result.ContinuationToken;
                } while (token != null);

                return allBlobsList;
            }
            catch (StorageException ex)
            {
                throw new StorageException($"Additional error information:{ex.ToString()}", ex.InnerException);
            }
        }

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

1 个答案: