Angular ng-bind-html and the directive inside it

Question

Plunker link

I have an element that I would like to associate with html.

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

It works. Now, along with this, I also have a directive that is bound to the associated html:

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

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

Answer 1

I also had to deal with this problem, and after hours of searching the internet, I read @Chandermani's comment, which turned out to be the solution. You need to call the "compilation" directive using this template:

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); } ); }; }]) 

Here you can see the worker.

Answer 2

Thanks for the excellent vkammerer answer. One optimization I would recommend is not to look after compilation. $ Eval in terms of hours can 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 is a fork and an updated violin.

Answer 3

Add this angular-bind-html-compile directive

 .directive('bindHtmlCompile', ['$compile', function ($compile) { return { restrict: 'A', link: function (scope, element, attrs) { scope.$watch(function () { return scope.$eval(attrs.bindHtmlCompile); }, function (value) { // Incase value is a TrustedValueHolderType, sometimes it // needs to be explicitly called into a string in order to // get the HTML string. element.html(value && value.toString()); // If scope is provided use it, otherwise use parent scope var compileScope = scope; if (attrs.bindHtmlScope) { compileScope = scope.$eval(attrs.bindHtmlScope); } $compile(element.contents())(compileScope); }); } }; }]); 

Use it like this:

 <div bind-html-compile="data.content"></div> 

Really easy :)

Answer 4

Unfortunately, I do not have enough reputation for comment.

I could not get this to work for ages. I changed the ng-bind-html code to use this custom directive, but I was not able to remove the $scope.html = $sce.trustAsHtml($scope.html) that was necessary for ng-bind-html to work. As soon as I removed this, the compilation function began to work.

Answer 5

For those dealing with content that has already passed through $sce.trustAsHtml , here's what I had to do differently

 function(scope, element, attrs) { var ensureCompileRunsOnce = scope.$watch(function(scope) { return $sce.parseAsHtml(attrs.compile)(scope); }, function(value) { // when the parsed expression changes assign it into the current DOM element.html(value); // compile the new DOM and link it to the current scope. $compile(element.contents())(scope); // Use un-watch feature to ensure compilation happens only once. ensureCompileRunsOnce(); }); } 

This is only part of the link directive since I am using a different layout. You will need to enter the $sce service as well as $compile .

Answer 6

The best solution that I have found! I copied it and worked exactly as I needed. Thank you thank you thank you...

in the function of the directory link i have

 app.directive('element',function($compile){ . . var addXml = function(){ var el = $compile('<xml-definitions definitions="definitions" />')($scope); $scope.renderingElement = el.html(); } . . 

and in the directive template:

 <span compile="renderingElement"></span>