Question

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

我的HTML -

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

角度控制器 - （不工作）

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

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

角度控制器 - （工作）

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

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

当我在控制器中追加子元素时，

ng-click不起作用。 onclick正在同一个地方工作。当我在像这个

这样的wrapperElement中使用它时，ng-click甚至可以正常工作

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

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

Answer 1

在将元素添加到DOM之前，您需要使用$compile来编译元素。这样的事情（未经测试）

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

像ng-click，ng-onmoseover这样的指令在Angular控制器中生成的子元素中不起作用

1 个答案: