添加了AngularJS点击事件的动态内容不能对添加的内容进行处理

发布时间：2020-12-17 07:42:36 所属栏目：安全来源：网络整理

导读：我本周刚刚开始在AngularJS上进行一个新的项目,而且我不得不尽快的加快速度. 我的一个要求是动态添加html内容,内容可能会有一个点击事件. 所以我下面的代码Angular代码显示一个按钮,当点击它时,它动态地添加另一个按钮.点击动态添加的按钮,应该添加另一个按

我本周刚刚开始在AngularJS上进行一个新的项目,而且我不得不尽快的加快速度.

我的一个要求是动态添加html内容,内容可能会有一个点击事件.

所以我下面的代码Angular代码显示一个按钮,当点击它时,它动态地添加另一个按钮.点击动态添加的按钮,应该添加另一个按钮,但是我无法在动态添加的按钮上获得ng点击

< button type =“button”id =“btn1”ng-click =“addButton()”>点击我< / 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服务,这将绑定角指令,如ng-click到您的控制器范围.并且不要忘记在控制器中添加$compile依赖关系,如下所示.

这里是plunker demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!