Functions in dynamic AngularJS html

Question

I am creating a forum where the replies are written with AngularJS (ng-repeat). A reply can contain links, and on all links, I have added a ng-click. This ng-click is not fired.

I guess it is because by the time the link is written to the dom, AngularJS is done hooking up functions. Are there any workarounds?

Here is an example: http://plnkr.co/edit/Jg0jVOpPL1LcVPHe5YQz?p=preview

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
    $scope.htmlBody = '<a href="http://www.google.com" ng-click="testmethod()" target="_blank">This does not work</a>';

    $scope.toTrustedHtml = function(htmlCode) {
      return $sce.trustAsHtml(htmlCode);
    };

    $scope.testmethod = function()
    {
       alert('yes');
    }
});


<body ng-controller="MainCtrl">
   <a href="http://www.google.com" ng-click="testmethod()" target="_blank">This works</a>
   <br /><br />
   <p ng-bind-html="toTrustedHtml(htmlBody)"></p>
</body>

Thanks Rasmus

You need to post some code if you want help, otherwise you'll just get downvotes... ng-click in a repeat should be fine, so you are not using Angular correctly — Lee Willis, Sep 18 '14 at 11:09
have a look at this answer - http://stackoverflow.com/questions/22737927/angular-ng-bind-html-filters-out-ng-click — Lee Willis, Sep 18 '14 at 11:54

score 0 · Answer 1 · edited Sep 18 '14 at 12:01

0

Here is a simple demo for your case: jsfiddle.net/HB7LU/6469/.

The idea is that you need to use $compile to let angular know you are adding dynamic functions.

edited Sep 18 '14 at 12:01

f2lollpll

997
6
15

answered Sep 18 '14 at 11:26

ABOS

3,723
3
17
23

I don't add elements with JavaScript. It is a complete bodytext with links in it. Can I do it a similar way? – Rasmus Laursen Sep 18 '14 at 11:36
As I said, the jsfiddle just gave you an idea what to do, not exactly your case. I think you can still use $compile. Give a shot and let us know. – ABOS Sep 18 '14 at 11:38
I used the directive that Lee Willis suggested, but this seems to work too. Thanks. – Rasmus Laursen Sep 18 '14 at 12:52
I took a look at that one: http://stackoverflow.com/questions/22737927/angular-ng-bind-html-filters-out-ng-click, it needs to change html and js and it is overly complicated. – ABOS Sep 18 '14 at 12:55
All I had to do was to include the directive in my project and use
instead of
– Rasmus Laursen Sep 18 '14 at 13:00
So you don't need to add compile directive in js file? – ABOS Sep 18 '14 at 13:05
Yes, as I said, I added/included the compile directive to my project. – Rasmus Laursen Sep 18 '14 at 13:16

Functions in dynamic AngularJS html

1 Answers1