How to bind event-handler when compile HTML snippet dynamically in AngularJS

Question

I'm using the OpenLayers with AngularJS, everything goes well until I was starting touch the popup functionality eventually.

I know how to use $compile service to make the dynamic content shows up in the popup by:

$scope.data = {
    text: "Dynamic content"
};

var template = "<div><span>{{data.text}}</span></div>";

$scope.showPopup = function() {
    var content = $compile(template)($scope);

    var lonlat = "-5694.06868525478, 6708925.0877411375";
    $timeout(function() {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            OpenLayers.LonLat.fromString(lonlat),
            null,
            content.html(),
            null,
            true
        );

        map.addPopup(popup);
    }, 0);
};

but I was struggling with the event handler now, if I change the template to(note the input and ng-click after the span):

var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";

and define the event handler in $scope:

$scope.func = function() {
    console.log("Hello, world");
};

but the event cannot be triggered. I highly doubt that using the content.html() will lose some important information which angularjs cares about. When I tried the following code:

    var template = "<div><span>{{data.text}}</span><input type='button' ng-click='func()' value='click me'/></div>";
    var content = $compile(template)($scope);
    angular.element("#footer").append(content);

this snippet works perfectly as expected(ng-click works here as well). The only difference between those two usage is: content and content.html().

But I cannot use content given the OpenLayers.Popup.FramedCloud expects an static html content string.

Any ideas about this? Thank you very much.

Answer 1

I use leaflet

var map = L.map('div-map');                    
// ...                   

Create your Scope object

var newScope = $scope.$new();

newScope.object = someObject;

newScope.myfunction = function(){ console.log("Testing")}

Your html String

var html =  
'<div><p><strong>ID : </strong>{{object.userId}}</p>'+
'<p><strong>Name : </strong>{{object.firstName}} {{object.lastName}}</p>'+
'<button class="btn btn-default" ng-click="myfunction()">Call My Function</button></div>';

Parse HTML into DOM element

var template = angular.element(html);

Compile the template

var linkFn = $compile(template); 

Link the compiled template with the scope.

var element = linkFn(newScope);

var marker = L.marker(
   [ object.latitude, object.longitude],
   {icon: -someIcon-}
)
.bindPopup( element[0]);

map.addLayer(marker); 

Don't forget to inject ($compile) into your code.

Answer 2

I have met with the same problem and spent 3 days to find the solution. Finally I found out that the solution is to call the $compile function after the popup is added to the map. See this fiddle. Openlayers with Angularjs

var template = "<div><span>{{halo}}</span><button ng-click='call()'>call</button></div>";
var popup = new OpenLayers.Popup.FramedCloud("popup", new OpenLayers.LonLat(103.83641, 1.35578), null, template, null, true);
map.addPopup(popup);
var pp = angular.element(document.querySelector('#popup'));
$compile(pp)($scope);

After the popup is added to the map, a new dom is created. Using Angularjs's jqlite, we can get the dom and compile it against the scope to make it bind to the method you need to call.