Javascript 像ng click、ng onmoseover这样的指令在Angular'；s控制器

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

我的html-

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

角度控制器-（不工作）

app.controller（'sampleCtrl'，['$scope'，函数（$scope）{
var nodeDivTag='单击我'；
$（“#wrapperElement”）.append（nodeDivTag）；
$scope.sampleFunction=function（）{
警报（“Costom消息”）；
};
}]);

角度控制器-（工作）

app.controller（'sampleCtrl'，['$scope'，函数（$scope）{
var nodeDivTag='单击我'；
$（“#wrapperElement”）.append（nodeDivTag）；
sampleFunction=函数（）{
警报（“Costom消息”）；
};
}]);

在控制器中追加子元素时，ng click不起作用。onclick在同一个地方工作。当我在wrapper元素中使用ng click时，它甚至可以工作

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

使用的控制器是不工作的。在这里，有人可以帮助我如何使用ng click-in附加子元素，或者为什么它在这种情况下不起作用。

在将元素添加到DOM之前，您需要使用它来编译元素。类似这样的东西（未测试）

app.controller（'sampleCtrl'，['$scope'，'$compile'，函数（$scope，$compile）{
var nodeDivTag=$compile（'Click Me'）（$scope）；
$（“#wrapperElement”）.append（nodeDivTag）；
sampleFunction=函数（）{
警报（“Costom消息”）；
};
}]);

HTML在控制器中？所有这些都不应该在一开始就发生。这些应该在指令模板中。@MCP设计是正确的。您很可能希望将DOM操作移动到指令中。

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

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

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

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