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。

我发现只有在更改字符串

上的范围后，地图才有效

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

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

Answer 1

当您可以简单地使用element方法提供的指令link属性时，为什么要不要使用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，这很棒。我们有一个ID。但此时element[0]（已创建的实际元素）仍会返回：div#map_{{$index}}.map。因此，如果您告诉L.Map使用map_0作为元素ID，那么虽然该元素已经存在于DOM中，但尚未解析该ID，因此L.Map会引发错误它无法找到元素：Map container not found。

这样做的方法是使用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，它只是在指令中没有用于此目的。

使用范围作为id在Leaflet中创建地图

1 个答案: