使用AngularJS单击事件添加的动态内容不适用于添加的内容答案

【问题标题】：Dynamic content added with AngularJS click event not working on the added content使用AngularJS单击事件添加的动态内容不适用于添加的内容
【发布时间】：2014-11-08 16:16:57
【问题描述】：

我这周刚开始为一个新项目使用 AngularJS，我必须尽快赶上进度。

我的要求之一是动态添加 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

【问题讨论】：

标签： angularjs angularjs-ng-click dynamic-html

【解决方案1】：

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 依赖项，如下所示。

这里是plunker demo

【讨论】：

非常感谢，帮了大忙
'foo' 是什么意思？你在哪里调用 document.getElementById('foo').append(temp)
我找到了唯一完整的答案。让它工作起来没有任何头疼，因为它也有一个干净的 plunker 演示。
我认为 addButton 应该是作用域函数，如 $scope.addButton=function(){....}

【解决方案2】：

您还可以将事件绑定到新按钮。

  $scope.addButton = function() {
    alert("button clicked");
    var btnhtml = '<button type="button">Click Me</button>';
    var newButt = angular.element(btnhtml);
    newButt.bind('click', $scope.addButton);
    angular.element(document.getElementById('foo')).append(newButt);
  }

更新plunkr。

【讨论】：

只是一个小花絮：从 Angularjs 2.0 开始，jqLite 将不再是 Angular 的一部分。所以大家不妨现在就开始使用jQuery吧。
感谢大家的快速反馈 :)