Adding ng-click to leaflet popup onEachFeature function

Question

I have created map and connected it with my geojson api.Basically I wish to link each marker popup with ng-click. Putting simple html like this wont do the job since i have to compile it:

layer.bindPopup("<button ng-click='()'>+feature.properties.title+</button>");

And that is what I'm trying to do. Here's that chunk of code. I am getting the "Error: [ng:areq] Argument 'scope' is required "

$http.get("http://markers.json").success(function(data, status) {
angular.extend($scope, {
geojson: {
  data: data,
  onEachFeature: function(feature, layer, scope) {
    var template = "<button class='button button-clear button-royal' ng-click='aa()')>" +feature.properties.title +"</button>";
    var linkFn = $compile(template);
    var content = linkFn(scope);
    layer.bindPopup(content);
 },
}
});
});

I am pretty new to angular and js so I suppose I'm missing something obvious and stupid here. Thanks!

score 4 · Accepted Answer · edited Dec 06 '16 at 23:24

4

You don't need to add scope as a parameter to your onEachFeature method. The scope is already available in variable $scope:

$http.get("http://markers.json").success(function(data, status) {
    angular.extend($scope, {
        geojson: {
            data: data,
            onEachFeature: function(feature, layer) {
                var template = "<button class='button button-clear button-small button-royal' ng-click='aa()'>" +feature.properties.title +"</button>";
                var linkFn = $compile(template);
                var content = linkFn($scope);
                layer.bindPopup(content[0]);
            }
        }
    });
});

Example: http://plnkr.co/edit/5cMWuhQeJLg5zkX9hVYK?p=preview

edited Dec 06 '16 at 23:24

nrhode

913
1
9
27

answered Dec 11 '15 at 06:12

iH8

27,722
4
67
76

I kind of suspected that, but then it says: ReferenceError: scope is not defined – Stefan Dec 11 '15 at 06:13
it's `$scope` not `scope`, at least, looks like you defined it that way because you're using `angular.extend($scope, {....});` – iH8 Dec 11 '15 at 06:16
Thanks, that halped a bit. Still trying to grasp the difference between those two. I did like you said. And now when I click on marker it says Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' – Stefan Dec 11 '15 at 06:36
Excuse me, the return type of `$compile` is `Array` so you need to use the first item as the content: `.bindPopup(content[0])` added a working example to my answer. Good luck with your project! – iH8 Dec 11 '15 at 14:22

Adding ng-click to leaflet popup onEachFeature function

1 Answers1