angular ng-bind-html und Direktive in ihm

Plunker-Verbindung

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

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

$scope.details = 'Success! details'

Aber die Direktive mit dem Div und dem Anker wird nicht ausgewertet. Wie kann ich es funktionieren lassen?

Ich war auch mit diesem Problem konfrontiert und nach stundenlangem Suchen im Internet las ich @ Chandermanis Kommentar, der sich als Lösung erwies. Sie müssen eine ‘compile’-statement mit diesem Muster aufrufen:

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

Sie können hier eine funktionierende Geige sehen

Danke für die tolle Antwort vkammerer. Eine Optimierung, die ich empfehlen würde, ist das Überwachen, nachdem die Kompilierung einmal ausgeführt wurde. Das $ eval im Watch-Ausdruck könnte Auswirkungen auf die performance 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 angular-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); }); } }; }]); 

Benutze es so:

 

Wirklich einfach 🙂

Leider habe ich nicht genug Reputation um zu kommentieren.

Ich konnte das nicht ewig schaffen. Ich habe meinen ng-bind-html Code geändert, um diese benutzerdefinierte Direktive zu verwenden, aber ich konnte die $scope.html = $sce.trustAsHtml($scope.html) nicht entfernen, die für ng-bind-html erforderlich war. Sobald ich das entfernte, begann die Kompilierfunktion zu arbeiten.

Für jeden, der sich mit Inhalten beschäftigt, die bereits über $sce.trustAsHtml laufen, muss ich das anders machen

 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 link Teil der Direktive, da ich ein anderes Layout verwende. Sie müssen sowohl den $sce Dienst als auch $compile injizieren.

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

in directive Link-function habe ich

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

und in der Richtlinienvorlage: