I have a JSON file that contains the page content I wish to load. In it, I have a link that looks like this:
<a data-ng-click='foo()'>Bar</a> When I load the page content into the page as HTML:
<p class="body" ng-bind-html="jsonText | raw"></p> using this filter:
app.filter('raw', function ($sce) { return function (input) { return $sce.trustAsHtml(input); } }); the link does not trigger foo() call on click. Is what I'm trying to do impossible or am I doing something wrong?
Using filter for this is not a good idea, because you need to $compile the loaded HTML and for that you need $scope. So, you either need to $compile it manually and put the result in $scope yourself, or create a directive instead of a filter:
.directive('dynamicHtml', ['$compile', function ($compile) { return { link: function ($scope, $element, $attrs) { $scope.$watch($attrs.dynamicHtml, function (html) { $element.empty().append($compile(html)($scope)); }); } }; }]); and use it instead of ngBindHtml:
<p dynamic-html="jsonText"></p> Just be aware that by compiling the HTML yourself, you're completely bypassing contextual escaping, so you should only do it with your own, secure content.
The problem is that your adding a plain text into DOM. Your filter will just ad an piece of html text which includes the ng-click directive which as far as the browser is concerned, it is just an attribute it cannot understand.
You need to compile the template using the $compile service before injecting it into the dom
