Angular use ng-click in prepended html

Question

i have this element in my html:

<div class='printOptionElements'></div>

and i want fill it dynamicly with ng-click-elements in my Controller.

$scope.printoptions = function() { $(".printOptionElements").append("<div class='printoption printhideelement' ng-click='printhide()'>Hide</div>"); } if (document.URL.indexOf("print=true") > 0) { $scope.printoptions(); } $scope.printhide = function() { alert("hidetest"); }

The printoption element will appear, but the ng-click will not work. I think that angular shows for ng-clicks before this ng-click is there. What can i do to "activate" the ng-click?

Thanks for help :)

Greetings Thomas

GPicazo · Accepted Answer · 2015-07-30 15:39:01Z

You need to inject the $compile service into your controller and then compile the content against the controller's scope before appending it:

$scope.printoptions = function() { var content = "<div class='printoption printhideelement' ng-click='printhide()'>Hide</div>"; $(".printOptionElements").append($compile(content)($scope)); }

Unless you are seeing any more issues relating to this code, can you mark the answer as accepted?
Indeed. Just needed to wait a few minutes before i could to it.

Collectives™ on Stack Overflow

Angular use ng-click in prepended html

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related