.html() verliert Winkel Anwendungsbereich

Question

Wenn ich versuche, einen HTML-Code an ein anderes Element mit jquery html() anhängen. Ich verliere die Fähigkeit zu ng-click. Hier ist eine grobe Beschreibung meines Codes. Zum Beispiel habe ich einen Controller namens testController

angular.module("test") 
.controller("testController", ["$scope", "$rootScope", 
    function ($scope, $rootScope) { 

     var systemMessage = "<div><span><\/span><\/div>"; 

     $scope.appendHtml = function() { 
      systemMessage.find("span").html('<button ng-click="highlightQuestion(id)">go to</button>'); 
     } 

     $scope.highlightQuestion = function (id) { 
      console.log(id); 
     } 

    }]); 

Sobald die HTML gerendert wird, wenn ich versuche, den Knopf zu klicken, passiert nichts. Was ich erwartet hätte war, dass es auf highlightQuestion Funktion zugreifen kann, da in meinem Code systemMessage an das div angehängt wurde, das von testController gesteuert wird. Hat jemand irgendwelche Gedanken darüber, wie das funktioniert? Vielen Dank!

Answer 1

Sie müssen $compile Service verwenden. Injizieren Sie es in die controller und verwenden Sie

$scope.appendHtml = function() { 
    var span = systemMessage.find("span"); 
    span.html('<button ng-click="highlightQuestion(id)">go to</button>'); 
    $compile(span)(scope); 
}