Directive loaded from ng-bind-html doesn't execute

Question

Inside the controller:

$scope.content = $sce.trustAsHtml('<some-directive></some-directive>');

The template:

<!-- Works perfectly -->
<some-directive></some-directive>

<!-- HTML loaded correctly, but the directive inside won't execute -->
<div class="article__main" ng-bind-html="content"></div>

What is going on here, exactly? How do I tell angular to check the DOM for new directives that are going to be added via ng-bind-html? BTW, I'm testing now and the directive is just logging to console, nothing else.

I used ng-include + a file on another version of the website (instead on ng-bind-html) and that worked.

Thanks on advance :)

score 0 · Answer 1 · answered Apr 25 '16 at 22:20

You need to use the $compile Service.

var compiledTemplate = $compile(content)(scope);

You also have to define the parent scope.Here is the Doku to $compile

I never used it with ng-bind-html but setting it on the DOM with element.append() works just fine

Directive loaded from ng-bind-html doesn't execute

1 Answers1