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

所以我试着为ployate.js创建指令，当我使用factory inside指令时，一切正常

(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);
                });
            }
        };
    });
})();

表中的一切都很好，我使用ng repeat和FilteredGeojson（）配合使用，但当我尝试将$scope.geojson传递给指令时，angular start infinite digest循环和map没有任何geojson

对于前面的指令，我使用add

 scope: { 
 data: '='
 }

看来我通过了

 data="geojson"

---

不幸的是，我不能使用传单指令进行角度标记，因为对于许多标记，速度非常慢

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

指令：

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').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 data="geojson"></leaflet>

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

以下是关于Plunker的工作示例：

根据下面评论中的要求，另一种实现方法实际上是对传单指令的一种完全不同的方法。在控制器中保留所有逻辑。回调方法：

指令：

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').directive('leaflet', [
  function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        callback: "="
      },
      template: '<div></div>',
      link: function (scope, element, attributes) {
        scope.callback(L.map(element[0]));
      }
    };
  }
]);

angular.module（'app'）。指令（'传单'[
函数（）{
返回{
限制：“EA”，
替换：正确，
范围：{
回调：“=”
},
模板：“”，
链接：功能（范围、元素、属性）{
回调（L.map（元素[0]）；
}
};
}
]);

模板：

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

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

控制器：

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]
        }
      }]
    };
  }
]);

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());
    };
  }
]);

angular.module（'app'）.controller（'rootController'）[
“$scope”，
职能（$范围）{
$scope.geojson={
//见上面的控制器
};
$scope.callback=函数（映射）{
var tileLayer=L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”，
最大缩放：18
}).addTo（地图）；
var layer=L.geoJson（$scope.geoJson）.addTo（map）；
map.fitBounds（layer.getBounds（））；
};
}
]);

---

下面是这种方法的一个工作示例：

我也尝试过它，但我尝试从FilteredGeojson函数中传递scope.geojson，该函数在过滤后有数据，然后我得到不定式摘要循环，映射为空。您可以尝试通过以下方式运行最终过滤对象：（别忘了在顶部导航栏中的FeatureCollection上设置它）也许你的过滤器正在破坏你的数据。或者你有一个我们可以在某处查看的测试用例吗？事实上，我认为过滤器不是问题所在，我使用了FilteredGeojson（）考虑到ng repeat和一切正常，很抱歉我没有任何测试用例。或者也许有其他方法可以将geojson从rest添加到ployate.js中？在angular-Floate指令一切正常之前，但它的性能在许多标记上非常差。我为ployate-directiv添加了另一种完全不同的方法e、 也许这会对你有用，我猜不会，但我只是想把它放在那里，也许这是一种更方便的工作方式，可以让你更容易地调试你的问题。哦，你可以使用ng repeat循环你的功能并不意味着你的geojson是有效的。你应该确实验证你的数据集。如果我们的数据集太大，您可以自己验证它。保存并包含此JS文件：然后像这样使用它

var errors=geojsonhint.hint（$scope.geojson）；

然后检查返回的数组中是否有内容