Winkel ng-bind-html und Direktive darin

Plunker Link

Ich habe ein Element, an das ich HTML binden möchte.

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

Das funktioniert. Jetzt habe ich auch eine Direktive, die an das gebundene HTML gebunden ist:

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

Aber die Direktive uppermit dem Div und dem Anker wird nicht bewertet. Wie bringe ich es zum Laufen?

Ich war auch mit diesem Problem konfrontiert und nach stundenlangem Durchsuchen des Internets las ich @ Chandermanis Kommentar, der sich als Lösung erwies. Sie müssen eine 'compile'-Direktive mit diesem Muster aufrufen:

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

Sie können hier eine funktionierende Geige davon sehen

Danke für die tolle Antwort vkammerer. Eine Optimierung, die ich empfehlen würde, ist das Aufheben der Wiedergabe, nachdem die Kompilierung einmal ausgeführt wurde. Das $ eval innerhalb des Watch-Ausdrucks kann Auswirkungen auf die Leistung haben.

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

Hier ist eine gegabelte und aktualisierte Geige.

Fügen Sie diese Direktive angle-bind-html-compile hinzu

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

Verwenden Sie es so:

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

Wirklich einfach :)

Leider habe ich nicht genug Ruf, um einen Kommentar abzugeben.

Ich konnte das ewig nicht zum Laufen bringen. Ich habe meinen ng-bind-htmlCode geändert , um diese benutzerdefinierte Direktive zu verwenden, aber ich konnte den Code nicht entfernen, der $scope.html = $sce.trustAsHtml($scope.html)erforderlich war, damit ng-bind-html funktioniert. Sobald ich dies entfernt hatte, begann die Kompilierungsfunktion zu funktionieren.

Für jeden, der sich mit Inhalten befasst, die hier bereits durchlaufen $sce.trustAsHtmlwurden, war das, was ich anders machen musste

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

Dies ist nur der linkTeil der Direktive, da ich ein anderes Layout verwende. Sie müssen den $sceService sowie injizieren $compile.

Beste Lösung, was ich gefunden habe! Ich habe es kopiert und es funktioniert genau so, wie ich es brauchte. Danke, danke, danke ...

in richtlinie link funktion habe ich

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

und in Direktivenvorlage:

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