我这周刚开始为一个新项目使用 AngularJS，我必须尽快 catch 进度。
我的要求之一是动态添加 html 内容，并且该内容可能有一个点击事件。
所以我下面的代码Angular代码显示了一个按钮，当点击时，它会动态添加另一个按钮。单击动态添加的按钮，应该添加另一个按钮，但我无法让 ng-click 处理动态添加的按钮<button type="button" id="btn1" ng-click="addButton()">Click Me</button>
工作代码示例在这里
http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.addButton = function() {
alert("button clicked");
var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
angular.element(document.getElementById('foo')).append((btnhtml));
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div id="foo">
<button type="button" id="btn1" ng-click="addButton()">Click Me
</button>
</div>
</body>
</html>http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview
最佳答案
app.controller('MainCtrl', function($scope,$compile) {
var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
var temp = $compile(btnhtml)($scope);
//Let's say you have element with id 'foo' in which you want to create a button
angular.element(document.getElementById('foo')).append(temp);
var addButton = function(){
alert('Yes Click working at dynamically added element');
}
});
您需要添加
$compile服务在这里，这将绑定(bind) angular directives喜欢 ng-click到您的 Controller 范围。不要忘记添加$compile您的 Controller 中的依赖项以及如下所示。这是plunker demo
关于angularjs - 使用AngularJS单击事件添加的动态内容不适用于添加的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26819222/