javascript - ng-click、ng-mouseover 等指令在 Angular Controller 中生成的子元素中不起作用

Question

我是 anglarjs 的新手。我的问题描述:-

我的 html -

<div ng-controller="sampleCtrl">
    <div id="wrapperElement"></div>
</div>

Angular Controller - (不工作)

app.controller('sampleCtrl', ['$scope', function($scope) {
    var nodeDivTag = '<div ng-click="sampleFunction()">Click Me</div>';
    $("#wrapperElement").append(nodeDivTag);

    $scope.sampleFunction = function(){
        alert("Costom message");
    };
}]);

Angular Controller - (工作)

app.controller('sampleCtrl', ['$scope', function($scope) {
    var nodeDivTag = '<div onclick="sampleFunction()">Click Me</div>';
    $("#wrapperElement").append(nodeDivTag);

    sampleFunction = function(){
        alert("Costom message");
    };
}]);

当我在 Controller 中附加子元素时，ng-click 不起作用。 onclick 在同一个地方工作。当我像这样在 wrapperElement 中使用它时，ng-click 甚至可以工作

<div ng-controller="sampleCtrl">
    <div id="wrapperElement" ng-click="sampleFunction()"></div>
</div>

使用的 Controller 是不工作的。任何人都可以在这里帮助我如何在附加的子元素中使用 ng-click 或者为什么它在这种情况下不起作用。

Answer 1

您将需要使用 $compile在将元素添加到 DOM 之前编译该元素。像这样(未测试)

app.controller('sampleCtrl', ['$scope', '$compile', function($scope, $compile) {
    var nodeDivTag = $compile('<div ng-click="sampleFunction()">Click Me</div>')($scope);
    $("#wrapperElement").append(nodeDivTag);

    sampleFunction = function(){
        alert("Costom message");
    };
}]);