Angularjs，不能将数据传递到geojsonLayer传单 [英] Angularjs, cannot pass data to geojsonLayer Leaflet

问题描述

所以我尽量为leaflet.js创建指令，当我使用工厂里面的指令，一切都运行得很好。

So i try to create directive for leaflet.js, when i use factory inside directive, everything works just fine

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

在我的控制器我做一些东西，并通过它来查看

In my controller i do some stuff and pass it to view

    $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重复使用FilteredGeojson（），但是当我试图通过$ scope.geojson到指令，角开始无限循环消化和地图是没有任何以GeoJSON

Everything works fine in table i use ng-repeat with FilteredGeojson() but when i try to pass $scope.geojson to directive, angular start infinite digest loop and map is without any geojson

要previous指令我使用添加

to previous directive i use add

 scope: { 
 data: '='
 }

鉴于我通过

 data="geojson"

可惜的是我不能使用单张指令的角度，因为许多指标是很慢的。

unfortunatelly i cannot use leaflet directive for angular, because with to many markers is very slow

推荐答案

你想，当除去工厂？这对我的作品：

Did you remove the factory when trying that? This works for me:

指令：

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

Here's the working example on Plunker: http://plnkr.co/edit/0cUudGJp2VwRtxFBMRqc?p=preview

按以下另一种方式来实现这个意见要求，事实上这是一个完全不同的方式，以单张指令。将所有的逻辑控制器。回调方法：

As per request in the comments below another way to implement this, infact it's a completely different approach to a leaflet directive. Keeping all the logic in your controller. The callback method:

指令：

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

Here's a working example of this approach: http://plnkr.co/edit/0cUudGJp2VwRtxFBMRqc?p=preview

这篇关于Angularjs，不能将数据传递到geojsonLayer传单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！