在动态元素上触发 ng-click

Question

我想创建可以触发 ng-click 事件的动态元素，并希望使用 DataTables 执行此操作，其中行是通过 AJAX 获取并动态创建的。问题是 ng-click 不会在这些行元素上触发。我在 JSBin 中用另一种情况重现了这个问题（DataTables 部分并不重要）。

Html

<div id="elements" ng-controller="TestController as controller">
  <button ng-click='doSomething()'>This button will work</button>
  </div>

  <button class="click">Create element</button>

单击 Create element 按钮时，将向 #elements div 中的 DOM 添加一个按钮。单击 div 中的按钮，控制台将输出一些内容。当您单击 #elements div 中已创建的按钮但没有动态创建的按钮时，它会执行它必须执行的操作。

JS

app.controller('TestController', ['$http', '$scope', function ($http, $scope) {
  //The NG function.
  $scope.doSomething = function(){
    console.log('Function fired!');
  };
}]);                                

//Create new element in the #elements div.                                  
(function(){
  $(".click").on("click", function(){
    var element = "<button ng-click='doSomething()'>This will not work</button>";
    $("#elements").append(element);
  });
})();

http://jsbin.com/hakibocabe/edit?html,js,console,output

我做错了什么？我错过了什么吗？

Answer 1

我认为您需要使用 $compile 服务，正如您在另一个答案中看到的那样：

ng-click not working from dynamically generated HTML

希望对您有所帮助！

Answer 2

据我了解，您想在单击另一个按钮时向 div 添加按钮，并让 div 中的每个按钮都使用 doSomething 函数。

因此，对于纯粹的 angular 答案，您需要这样的答案：

HTML:

<div ng-controller="TestController">
  <div ng-repeat="button in buttons">
    <button ng-click="doSomething()">Button</button>
  </div>
  <button ng-click="addButton()">Add</button>
</div>

JS:

app.controller('TestController', ['$http', '$scope', function ($http, $scope) {
  $scope.buttons = [];

  $scope.doSomething = function(){
    console.log('Function fired!');
  };

  $scope.addButton = function(){
    $scope.buttons.push($scope.buttons.length)//or whatever content
  };
}]);

Answer 3

尽管@Radmer van der Heyde 的回答几乎解释了如何 Angular 向 DOM 添加按钮的方法（我真的很感激），@Claies 建议我使用Angular DataTables 而不是使用普通的 jQuery DataTables 并指出了一些关于如何以 Angular 方式执行此操作的要点。

我已经查看了 Angular DataTables，现在正在使用它，这几乎解决了我的问题。因此，如果您遇到与我相同的问题，请使用 Angular DataTables：http://l-lin.github.io/angular-datatables/#/welcome

在动态元素上触发 ng-click

Fire ng-click on dynamic element

javascript

angularjs

angularjs-ng-click