javascript - 使用范围作为 id 在 Leaflet 中创建 map

Question

鉴于我使用 ng-repeat，它允许我为每个项目使用 $index，我尝试使用此属性为 ng-repeat 中的每个项目创建一个映射

查看

 <div map-directive id="map{{$index}}" name="'map' + [$index]" class="mapContainers">
 </div>

现在 id 是 map0、map1 等等。

指令

    var map = L.map(scope.name, {
                        center: [40.766964, -73.930453],
                        zoom: 4,
                        layers: [BaseMap]
                    });

在指令scope.name中包含唯一的id。

我发现 map 仅在更改字符串范围后才起作用

    var map = L.map('map', {
                        center: [40.766964, -73.930453],
                        zoom: 4,
                        layers: [BaseMap]
                    });

也许有人已经遇到过类似的问题。

Answer 1

当您可以简单地使用由 link 方法提供的指令的 element 属性时，为什么要特意使用 ID？它的存在是有原因的，也可能会使用它:

angular.module('app', [
  'ui.router'
]);

angular.module('app').config([
  '$stateProvider',
  '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('root', {
      'url': '/',
      'controller': ['$scope', function ($scope) {
          $scope.maps = ['a', 'b', 'c', 'd'];
      }],
      'template': '<div map-directive ng-repeat="map in maps" class="map"></div>'
    });
  }
]);

angular.module('app').directive('mapDirective', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var map = L.map(element[0], {
        center: [0, 0],
        zoom: 1,
        layers: [
          L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
            maxZoom: 18
          })  
        ]
      });
    }
  };
});

像魅力一样工作:http://plnkr.co/edit/toZByf9QSletY5erXID7?p=preview

我将尝试解释这里实际发生的情况。如果您使用模板字符串添加 ID:

<div map-directive ng-repeat="map in maps" id="map_{{$index}}" class="map"></div>

指令link(前置或后置，无关紧要)函数被执行:

'link': function (scope, element, attrs) {
    console.log(element[0]);
    console.log(attr.id);
}

这里 attrs.id 返回 map_0 作为 ng-repeat 中的第一个元素，这很棒。我们有身份证了但此时 element[0] (已创建的实际元素)仍然返回:div#map_{{$index}}.map。因此，如果您告诉 L.Map 使用 map_0 作为元素 ID，则尽管该元素已经存在于 DOM 中，但该 ID 尚未被解析，因此 L.Map 会抛出一个错误，指出它无法找到该元素:找不到 map 容器。

实现这一点的方法是使用 element 属性，它保存实际元素的引用，L.Map 也接受该引用，正如您可以通过它的签名看到的那样:

L.map( <HTMLElement|String> id, <Map options> options? )

http://leafletjs.com/reference.html#map-l.map

如果您分配对实际元素的引用(既然您已经获得了它，为什么不呢？)，它可以使 L.Map 不必执行 ID 的 DOM 查找，所以这甚至是更好的。如果您需要用于 CSS 目的或其他目的，您仍然可以分配 ID，只是在指令中没有用于此目的。