用AngularJS click事件添加的动态内容不适用于添加的内容

小编典典

用AngularJS click事件添加的动态内容不适用于添加的内容

angularjs

我本周刚开始使用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

阅读 323

2020-07-04

共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像下面一样在您的控制器中添加依赖项。

这是小 plnkr演示

2020-07-04