Angularjs，无法将数据传递给geojsonLayer Leaflet

Question

所以我尝试为 Leaflet.js 创建指令，当我在指令中使用工厂时，一切正常

(function() {
'use strict';
 angular
    .module('directoryAppMap')
    .directive('leafletDirective', function (Directory) {
        return {
            restrict: 'EA',
            template:'<div></div>',
            link: function (scope,element, attrs) {
                var map = L.map(attrs.id, {
                    center: [40, -86],
                    zoom: 2
                });
                //create a CloudMade tile layer and add it to the map
                L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                    maxZoom: 18
                }).addTo(map);
                Directory.get(function (data) {
                  L.geoJson(data).addTo(map);
                });
            }
        };
    });
})();

在我的控制器中，我做了一些事情并将其传递给查看

    $scope.geojson = {};
    $scope.FilteredGeojson = function () {
        var result;

        result = $filter('filter')($scope.data, $scope.search);
        result = $filter('offset')(result, $scope.currentPage *            $scope.pageSize);
        result = $filter('limitTo')(result, $scope.pageSize);
        $scope.geojson = result;
        return result;
    };

在表中一切正常我使用 ng-repeat 和 FilteredGeojson() 但是当我尝试将 $scope.geojson 传递给指令时，角度开始无限摘要循环并且地图没有任何 geojson

对上一个指令我使用添加

 scope: { 
 data: '='
 }

在我看来我通过了

 data="geojson"

不幸的是，我不能将传单指令用于角度，因为有很多标记非常慢

Answer 1

您在尝试时是否删除了工厂？这对我有用：

指令：

angular.module('app').directive('leaflet', [
  function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        data: "="
      },
      template: '<div></div>',
      link: function (scope, element, attributes) {
        var map = L.map(element[0], {
            center: [0, 0],
            zoom: 0
        });
        var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            maxZoom: 18
        }).addTo(map);
        var geojsonLayer = L.geoJson(scope.data).addTo(map);
        map.fitBounds(geojsonLayer.getBounds());
      }
    };
  }
]);

控制器：

angular.module('app').controller('rootController', [
  '$scope',
  function ($scope) {
    $scope.geojson = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [45, 45]
        }
      },{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [-45, -45]
        }
      }]
    };
  }
]);

模板：

<leaflet data="geojson"></leaflet>

这是 Plunker 上的工作示例：http://plnkr.co/edit/0cUudGJp2VwRtxFBMRqc?p=preview

根据下面 cmets 中的请求，另一种实现方式是，实际上它是一种完全不同的传单指令方法。将所有逻辑保存在控制器中。回调方法：

指令：

angular.module('app').directive('leaflet', [
  function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        callback: "="
      },
      template: '<div></div>',
      link: function (scope, element, attributes) {
        scope.callback(L.map(element[0]));
      }
    };
  }
]);

模板：

<leaflet callback="callback"></leaflet>

控制器：

angular.module('app').controller('rootController', [
  '$scope',
  function ($scope) {
    $scope.geojson = {
      // See controller above
    };
    $scope.callback = function (map) {
      var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18
      }).addTo(map);
      var layer = L.geoJson($scope.geojson).addTo(map);
      map.fitBounds(layer.getBounds());
    };
  }
]);

这是这种方法的一个工作示例：http://plnkr.co/edit/0cUudGJp2VwRtxFBMRqc?p=preview