Angular无法将数据传递给自定义指令

时间:2015-02-11 16:11:07

标签: angularjs leaflet geojson

我的指示

angular
    .module('directoryAppMap')
    .directive('leafletDirective', function () {
        return {
            restrict: 'EA',
            scope: {
                data:'='     //I try to pass data by this scope//
            },
            replace:true,
            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);

                scope.ho = ["geometry": { "type": "Point", "coordinates": [ 2.0, 2.0 ] } },
                    { "type": "Feature",  "geometry": { "type": "Point", "coordinates": [ 1.0, 1.0 ] } },

                ];
                    L.geoJson(scope.ho).addTo(map);
            }

        };
    });

但是当我尝试从我的视图中传递数据时

<tr ng-repeat="hf in (FilteredGeojson = (ho))">
<div leaflet-directive id="map" data="FilteredGeojson"></div>

范围是相同的,区别在于我在控制器中初始化它而不是在指令中,然后当我将FilteredGeojson传递给leaflet时,它显示了无效的geojson对象。

我甚至抛弃所有过滤器以便传递一些数据,也许我对指令和全局范围做错了?

我的geojson有效我检查了很多次,我应该以其他方式将数据传递给传单吗?对我而言,重要的是地图和表格是动态集成的。

1 个答案:

答案 0 :(得分:0)

我已经删除了L方法并发现由于部分代码而无法正常工作

<tr ng-repeat="hf in FilteredGeojson = (ho)">
<div leaflet-directive id="map" data="FilteredGeojson"></div>

http://plnkr.co/edit/4zWwDP0SaTYCB54k8CEc?p=preview