Angular: ng-bind-html filters out ng-click?

Question

I have some html data that I'm loading in from a json file.

I am displaying this html data by using ngSanitize in my app and using ng-bind-html.

Now I would like to convert any links in the json blob from the standard

• <a href="some_link">link</a>

to:

• <a ng-click="GotoLink('some_link','_system')">link</a>.

So I'm doing some regExp on the json file to convert the links, but for some reason however ng-bind-html is filtering out the ng-click in it's output, and I can't figure out why. Is it supposed to do this, and if so is it possible to disable this behavior?

Check out this jsFiddle for a demonstration: http://jsfiddle.net/7k8xJ/1/

Any ideas?

Answer 1

Ok, so the issue is that it isn't compiling the html you include (angular isn't parsing it to find directives and whatnot). Can't think of a way to make it to compile from within the controller, but you could create a directive that includes the content, and compiles it.

So you would change

<p ng-bind-html="name"></p> 

to

<p compile="name"></p> 

And then for the js:

var myApp = angular.module('myApp', ['ngSanitize']); angular.module('myApp') .directive('compile', ['$compile', function ($compile) {   return function(scope, element, attrs) {     scope.$watch(       function(scope) {         return scope.$eval(attrs.compile);       },       function(value) {         element.html(value);         $compile(element.contents())(scope);       }    )};   }]).controller('MyCtrl', function($scope) {     var str = 'hello http://www.cnn.com';     var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;     result = str.replace(urlRegEx, "<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>");     $scope.GotoLink = function() { alert(); }     $scope.name = result; }); 

Angular 1.2.12: http://jsfiddle.net/7k8xJ/4/

Angular 1.4.3: http://jsfiddle.net/5g6z58yy/ (same code as before, but some people were saying it doesn't work on 1.4.*)