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

3

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

answered Jul 30, 2015 at 15:39

GPicazo

6,7263 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GPicazo Over a year ago

Unless you are seeing any more issues relating to this code, can you mark the answer as accepted?

Larkis Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related