javascript - .html() 失去 Angular 范围

Question

当我尝试使用 jquery 的 html() 将 HTML 附加到另一个元素时。我失去了 ng-click 的能力。这是我的代码的粗略描述。例如我有一个名为 testController

的 Controller

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

    }]);

呈现 HTML 后，当我尝试单击按钮时，没有任何反应。我所期望的是它将能够访问 highlightQuestion 函数，因为在我的代码中 systemMessage 被附加到由 testController 控制的 div .有人对如何使这项工作有任何想法吗？谢谢!

Answer 1

您需要使用 $compile 服务。将其注入(inject)controller并使用

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