gpt4 book ai didi

javascript - ng-click 不适用于新添加的元素

转载 作者:行者123 更新时间:2023-11-29 21:46:50 25 4
gpt4 key购买 nike

为什么我的 ng-click 在我附加了一个按钮后不起作用?当我最初加载按钮时,同样的 ng-click 正在工作。

app.controller('demoCtrl', function() {


this.clk = '<button ng-click="dctrl.click()">Button</button>';

this.click = function() {

alert('clicked');

}
})

app.directive('btnClick', function() {

return {

restrict: 'A',
scope: {

actionBtn: '='

},
link: function(scope, element, attrs) {

element.append(scope.actionBtn);

}

}

})

HTML

<body ng-controller="demoCtrl as dctrl">

<div btn-click action-btn="dctrl.clk"></div>

</body>

http://plnkr.co/edit/QPKXfGd9s7HzLvEfKvbG?p=preview

更新

我也试过这种方法,但没有成功

element.append($compile(scope.actionBtn)(scope));

最佳答案

您需要compile为 angularjs 手动创建的新 dom 元素,以便在其上工作

app.directive('btnClick', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.append($compile(scope.$eval(attrs.actionBtn))(scope));
}
}
}])

var app = angular.module('my-app', [], function() {})

app.controller('demoCtrl', function() {
this.clk = '<button ng-click="dctrl.click()">Button</button>';

this.click = function() {
alert('clicked');
}
})

app.directive('btnClick', ['$compile',
function($compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.append($compile(scope.$eval(attrs.actionBtn))(scope));
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="demoCtrl as dctrl">
<div action-btn="dctrl.clk" btn-click></div>
</div>

关于javascript - ng-click 不适用于新添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30866321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com