用AngularJS click事件添加的动态内容不适用于添加的内容
我本周刚开始使用AngularJS进行一个新项目，所以我必须尽快加快速度。
我的要求之一是动态添加html内容，并且该内容可能带有click事件。
因此，我在下面的代码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此处添加服务，这样会将angular directives诸如此类的内容绑定ng- click到您的控制器范围。并且不要忘记$compile像下面一样在您的控制器中添加依赖项。
这是小 plnkr演示
-
问题内容： 下面的代码有效。如果有更好的方法，请告诉我。如果我使用通过ajax加载test.html的主页中test.html中存在的脚本内容。该脚本不起作用。 Test.html： 我们必须根据需要通过ajax加载脚本以及动态加载的内容，但是我感到不利的是，每次我们发送ajax请求脚本时都会始终加载内容。但是我只找到了这种解决方案。如果有人知道更好的解决方案，请回复。 例如，如果以这种方式更改代
-
问题内容： 我有一些与它们相关联的jQueryUI按钮的项目列表。完成一个动作（删除一个项目）后，我想通过ajax重新加载列表。 唯一的问题是，当我这样做时，JQueryUI按钮不再显示，仅显示标准标记。 我知道我可以动态添加点击处理程序等，但是如何将jQueryUI 应用于它们？ 问题答案： 通过ajax重新加载时，请在该上下文中调用（或使用的任何变体），如下所示： 这将 仅在响应中的*元素上运
-
问题内容： 假设我有一些要将JavaScript操作添加到的链接： 当页面加载时，我给他们所有的click事件： 但让我们说之后，我添加了另一个元素，但我想给它相同的事件。我不能这样做： 因为前三个事件将包含两个事件。处理此问题的最佳方法是什么？ 问题答案： 您可以将$ .on绑定到这样的dom中始终存在的父元素。 请注意： 您可以用dom中将始终存在的元素的任何父级替换，并且父级越近越好。 具有
-
问题内容： 我知道这个问题出现在几个地方（迫使jQueryMobile重新评估动态插入的内容的样式/主题），但是没有一个对我有用的答案。 我正在使用ajax加载一些内容，并将其插入到div中，如下所示： 我尝试在要添加html的目标和页面上都设置targetRefresh，但是没有运气。插入了内容，但未应用样式。 我也尝试过 知道该怎么办吗？ 插入的html是一堆这样的： 谢谢你的帮助 拉尔西 问
-
问题内容： 我想知道如何动态增强jQuery Mobile页面？ 我尝试使用以下方法： 和 另外，如何仅阻止复选框的增强标记？ 问题答案： 介绍： 有几种增强动态创建的内容标记的方法。将新内容动态添加到jQuery Mobile页面还不够，必须使用经典的jQuery Mobile样式来增强新内容。因为这是处理繁重的任务，所以需要有一些优先级，如果可能的话，jQuery Mobile需要做的工作尽可
-
我想知道如何动态增强jQuery移动页面？ 我尝试使用以下方法： > <代码>$（“[数据角色=“页面”]”）。触发器（“创建”） 和 <代码>$（“[数据角色=“页面”]”）。第页（） 另外，如何防止仅对复选框进行增强标记？