Rendering-statementen in $ sce.trustAsHtml

Ich habe hier einen Plunker eingefügt: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

Ich versuche, dem DOM eine Schaltfläche hinzuzufügen, und wenn Sie darauf klicken, sollte die function ausgeführt werden, die an das DOM gebunden ist. In diesem Fall sollte es “testen” warnen. Hier ist der Code.

Regler

app.controller('MainCtrl', function($scope, $sce) { $scope.trustedHtml = $sce.trustAsHtml(''); $scope.testAlert = function () { alert('testing') }; }); 

HTML

  

   

    $sce.trustAsHtml und ng-bind-html sind nicht dazu gedacht, HTML mit statementen zu erstellen. Diese Technik wird nicht funktionieren.

    Dies liegt daran, dass eckig funktioniert, indem zuerst kompiliert und dann verknüpft wird. Siehe den konzeptionellen Überblick für eine gute Erklärung.

    Kurz gesagt, wenn Sie den in Ihrem trustAsHtml definierten HTML- trustAsHtml , ist es für trustAsHtml zu spät, die ng-click statement zu kompilieren (und damit zu verstehen).

    Um HTML dynamisch hinzuzufügen, sollten Sie sich den $compile Dienst (und / oder die Direktiven) ansehen. Dokumente sind hier .

    Entschuldigung für mein schlechtes Englisch.

    Für Angular 1.6.1 habe ich eine Lösung gefunden, die für mich funktioniert hat.

    Vorlage:

     

    Im Controller:

      $scope.trustAsHtml = function(string) { return $sce.trustAsHtml(string); }; 

    Richtlinie:

     .directive('initBind', function($compile) { return { restrict: 'A', link : function (scope, element, attr) { attr.$observe('ngBindHtml',function(){ if(attr.ngBindHtml){ $compile(element[0].children)(scope); } }) } }; })