与AngularJS添加动态内容的点击事件不工作添加的内容 [英] Dynamic content added with AngularJS click event not working on the added content
问题描述
我就在这周开始AngularJS一个新的项目，我必须拿出以尽快的速度。
我的一个要求，就是要动态添加HTML内容以及这些内容可能会对它click事件。
所以，code角code下面我有显示按钮，点击后，它动态地添加另一个按钮。点击动态添加的按钮，应该添加另一个按钮，但我不能让NG-点击的动态添加按钮的工作
＆LT;按钮式=按钮ID =BTN1NG点击=Add按钮（）＆gt;点击ME＆LT; /按钮＆GT;
工作code样品是在这里
<一href=\"http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=$p$pview\">http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=$p$pview
VAR应用= angular.module（'plunker'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围）{\r
$ scope.name ='世界';\r
\r
$ scope.addButton =功能（）{\r
警报（按钮，点击）;\r
VAR btnhtml ='＆LT;按钮式=按钮NG点击=Add按钮（）＆gt;点击ME＆LT; /按钮＆GT;';\r
angular.element（的document.getElementById（'富'））追加（（btnhtml））。\r
}\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=plunker＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8/＆GT;\r
＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;\r
＆LT;脚本＆GT;\r
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;\r
＆LT; / SCRIPT＆GT;\r
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
＆所述;脚本数据需要=angular.js@1.0.xSRC =// code.angularjs.org / 1.3.0 / angular.js数据semver =1.3.0＆GT;＆下; / SCRIPT＆GT;\r
\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl＆GT;\r
＆LT; P＆GT;您好{{名}}＆LT;！/ P＆GT;\r
＆LT; DIV ID =foo的＆GT;\r
＆LT;按钮式=按钮ID =BTN1NG点击=Add按钮（）＆gt;点击我\r
＆LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
<一个href=\"http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=$p$pview\">http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=$p$pview
VAR btnhtml ='＆LT;按钮式=按钮NG点击=Add按钮（）＆gt;点击ME＆LT; /按钮＆GT;';
变种临时= $编译（btnhtml）（$范围内）;
。angular.element（的document.getElementById（'富'））追加（TEMP）;
您需要在这里添加 $编译服务，这将绑定角指令如 NG-点击到控制器的范围。不要忘记添加 $编译的依赖在你的控制器，以及像下面。
app.controller（'MainCtrl'，函数（$范围，$编译）{
这里是 plunker
I just started on AngularJS this week for a new project, and I have to come up to speed ASAP.
One of my requirements, is to add html content dynamically and that content might have a click event on it.
So the code Angular code I have below displays a button, and when clicked, it dynamically adds another button. Clicking on the dynamically added buttons, should add another button, but I cannot get the ng-click to work on the dynamically added buttons
<button type="button" id="btn1" ng-click="addButton()">Click Me</button>
The working code sample is here 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
var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
var temp = $compile(btnhtml)($scope);
angular.element(document.getElementById('foo')).append(temp);
you need to add $compile service here, that will bind the angular directives like ng-click to your controller scope. and dont forget to add $compile dependency in your controller as well like below.
app.controller('MainCtrl', function($scope,$compile) {
here is the plunker
这篇关于与AngularJS添加动态内容的点击事件不工作添加的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
