angular ng-bind-html y directiva dentro de él

Plunker Link

Tengo un elemento que me gustaría vincular a html.

Eso funciona. Ahora, junto con eso, también tengo una directiva que está vinculada al html enlazado:

$scope.details = 'Success! details'

Pero la directiva upper con div y ancla no se evalúa. ¿Cómo hago que funcione?

También me enfrentaba a este problema y después de horas buscando en Internet leí el comentario de @ Chandermani, que resultó ser la solución. Necesita llamar a una directiva ‘comstackr’ con este patrón:

HTML:

 

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

Puedes ver un violín funcional aquí

Gracias por la excelente respuesta vkammerer. Una optimización que recomendaría es desproteger después de que la comstackción se ejecute una vez. El $ eval dentro de la expresión del reloj podría tener implicaciones de rendimiento.

  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 comstacktion happens only once. ensureCompileRunsOnce(); } ); }; }]); 

Aquí hay un violín ahorquillado y actualizado.

Agregue esta directiva angular-bind-html-compile

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

Úselo así:

 

Realmente fácil 🙂

Lamentablemente, no tengo la reputación suficiente para comentar.

No pude lograr que esto funcione durante años. Modifiqué mi código ng-bind-html para usar esta directiva personalizada, pero no pude eliminar el $scope.html = $sce.trustAsHtml($scope.html) que se requería para que ng-bind-html funcione. Tan pronto como eliminé esto, la función de comstackción comenzó a funcionar.

Para cualquiera que se ocupe de contenido que ya se ha ejecutado a través de $sce.trustAsHtml aquí está lo que tenía que hacer de manera diferente

 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 comstacktion happens only once. ensureCompileRunsOnce(); }); } 

Esta es solo la parte del link de la directiva ya que estoy usando un diseño diferente. Necesitará inyectar el servicio $sce así como $compile .

La mejor solución que he encontrado! Lo copié y funciona exactamente como lo necesitaba. Gracias Gracias gracias …

en la función de enlace de directivas que tengo

 app.directive('element',function($compile){ . . var addXml = function(){ var el = $compile('')($scope); $scope.renderingElement = el.html(); } . . 

y en plantilla de directiva: