angular ng-bind-html and directive within it

Question

Plunker Link

I have a element which I would like to bind html to it.

<div ng-bind-html="details" upper></div>

That works. Now, along with it I also have a directive which is bound to the bound html:

$scope.details = 'Success! <a href="#/details/12" upper>details</a>'

But the directive upper with the div and anchor do not evaluate. How do I make it work?

Answer 1

I was also facing this problem and after hours searching the internet I read @Chandermani's comment, which proved to be the solution. You need to call a 'compile' directive with this pattern:

HTML:

<div compile="details"></div> 

JS:

.directive('compile', ['$compile', function ($compile) {     return function(scope, element, attrs) {         scope.$watch(             function(scope) {                 // watch the 'compile' expression for changes                 return scope.$eval(attrs.compile);             },             function(value) {                 // when the 'compile' expression changes                 // assign it into the current DOM                 element.html(value);                  // compile the new DOM and link it to the current                 // scope.                 // NOTE: we only compile .childNodes so that                 // we don't get into infinite loop compiling ourselves                 $compile(element.contents())(scope);             }         );     }; }]) 

You can see a working fiddle of it here

Answer 2

Thanks for the great answer vkammerer. One optimization I would recommend is un-watching after the compilation runs once. The $eval within the watch expression could have performance implications.

    angular.module('vkApp')   .directive('compile', ['$compile', function ($compile) {       return function(scope, element, attrs) {           var ensureCompileRunsOnce = scope.$watch(             function(scope) {                // watch the 'compile' expression for changes               return scope.$eval(attrs.compile);             },             function(value) {               // when the 'compile' expression changes               // assign it into the current DOM               element.html(value);                // compile the new DOM and link it to the current               // scope.               // NOTE: we only compile .childNodes so that               // we don't get into infinite loop compiling ourselves               $compile(element.contents())(scope);                // Use un-watch feature to ensure compilation happens only once.               ensureCompileRunsOnce();             }         );     }; }]); 

Here's a forked and updated fiddle.