使用 AngularJS 单击事件添加的动态内容对添加的内容不起作用 [英] Dynamic content added with AngularJS click event not working on the added content

查看：18 发布时间：2021/11/9 23:38:32 angularjs angularjs-ng-click dynamic-html

本文介绍了使用 AngularJS 单击事件添加的动态内容对添加的内容不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这周我刚刚开始使用 AngularJS 进行一个新项目，我必须尽快跟上进度.

我的要求之一是动态添加 html 内容，并且该内容可能具有点击事件.

所以我下面的 Angular 代码显示了一个按钮，当点击时，它会动态添加另一个按钮.单击动态添加的按钮，应该添加另一个按钮，但我无法通过 ng-click 处理动态添加的按钮

工作代码示例在这里http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.name = '世界';$scope.addButton = function() {alert("按钮被点击");var btnhtml = '<button type="button" ng-click="addButton()">点击我</button>';angular.element(document.getElementById('foo')).append((btnhtml));}});

<html ng-app="plunker"><头><meta charset="utf-8"/><title>AngularJS Plunker</title><脚本>document.write('<base href="' + document.location + '"/>');<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><body ng-controller="MainCtrl"><p>你好{{name}}！</p><div id="foo"><button type="button" id="btn1" ng-click="addButton()">点击我

</html>

http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

解决方案

app.controller('MainCtrl', function($scope,$compile) {var btnhtml = '<button type="button" ng-click="addButton()">点击我</button>';var temp = $compile(btnhtml)($scope);//假设你有一个id为'foo'的元素，你想在其中创建一个按钮angular.element(document.getElementById('foo')).append(temp);var addButton = function(){alert('是点击在动态添加的元素上工作');}});

您需要在此处添加 $compile 服务，它将像 ng-click 这样的 angular 指令 绑定到您的控制器范围.并且不要忘记在控制器中添加 $compile 依赖项，如下所示.

这里是 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

解决方案

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');
   }

});

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.

here is the plunker demo

这篇关于使用 AngularJS 单击事件添加的动态内容对添加的内容不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 AngularJS 单击事件添加的动态内容对添加的内容不起作用 [英] Dynamic content added with AngularJS click event not working on the added content

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

使用 AngularJS 单击事件添加的动态内容对添加的内容不起作用 [英] Dynamic content added with AngularJS click event not working on the added content

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭