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

Enlace Plunker

Tengo un elemento al que me gustaría vincularle html.

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

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

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

Pero la directiva uppercon div y anchor no evalúa. ¿Cómo lo hago funcionar?

También estaba enfrentando 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 de 'compilación' con este patrón:

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

Puedes ver un violín de trabajo aquí.

Gracias por la gran respuesta vkammerer. Una optimización que recomendaría es dejar de mirar después de que la compilación se ejecute una vez. El $ eval dentro de la expresión de observación podría tener implicaciones en el 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 compilation happens only once.
              ensureCompileRunsOnce();
            }
        );
    };
}]);

Aquí hay un violín bifurcado 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í:

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

Realmente fácil :)

Lamentablemente no tengo suficiente reputación para comentar.

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

Para cualquiera que se ocupe de contenido que ya se ha revisado, $sce.trustAsHtmlaquí es lo que tuve 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 compilation happens only once.
            ensureCompileRunsOnce();
        });
}

Esta es solo la linkparte de la directiva, ya que estoy usando un diseño diferente. Deberá inyectar el $sceservicio también $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 directiva tengo

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

y en plantilla de directiva:

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