Angular cannot pass data to custom directive

Question

My Directive

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

        };
    });

But when i Try to pass data from my view

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

The scope is the same, the difference is that i initialize it in controller not in directive and then when i pass FilteredGeojson to leaflet it show me invalid geojson object.

I even throw away all filters in order to just pass some data, Maybe i do something wrong with directive and global scope?

My geojson is valid i check it plenty of times, should i pass data to leaflet in some other way? For me is important that map and table are integrated dynamically.

possible duplicate of [Angularjs, cannot pass data to geojsonLayer Leaflet](http://stackoverflow.com/questions/28441363/angularjs-cannot-pass-data-to-geojsonlayer-leaflet) — iH8, Feb 11 '15 at 16:17

score 0 · Accepted Answer · answered Feb 11 '15 at 16:38

0

I've stripped out the L methods and noticed it wasn't working due to partial code

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

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

answered Feb 11 '15 at 16:38

maurycy

8,455
1
27
44

The problem is it can work with simple table, but with leaflet and factory not – Igor Feb 11 '15 at 16:44
can you recreate it on plunk? – maurycy Feb 11 '15 at 17:01
actually if found some solution, but is not perfect,
, but filter is not working, it is possible to make filtering on ng-init?
– Igor Feb 11 '15 at 17:08
It's possible but it's most likely not working on init because `data` is empty at the time when filter is executed. Although that SHOULD work `` – maurycy Feb 11 '15 at 17:16
actually i dont know what you mean, that data is empty because in controller i create scope.data with geojson array, the problem is when i do like you wrote then i have infinite digest loop and zero markers, i found somewhere that making ng-init could solve it – Igor Feb 11 '15 at 17:55
i tried once more like this no errors works fine, beside one when i pass FilteredGeojson to directive by scope, map is empty? What could be the reason of that? – Igor Feb 11 '15 at 17:59
i made new question with fiddler http://stackoverflow.com/questions/28464558/ng-repeat-causing-infinitive-digest-loop-when-passing-scope-to-leaflet-directive – Igor Feb 11 '15 at 21:38

Angular cannot pass data to custom directive

1 Answers1