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

根据我的理解，当你点击另一个按钮并且div中的每个按钮都使用doSomething功能时，你想要为div添加按钮。

因此，对于一个纯粹的角度答案，你想要这样的东西：

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 2

虽然@Radmer van der Heyde的答案几乎解释了如何为DOM工作添加按钮的Angular方式（我真的非常感谢），@ Claies建议我使用Angular DataTables而不是使用普通的jQuery DataTables和指出了如何以Angular的方式做到这一点。

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

Answer 3

我认为你需要使用$ compile服务，正如你在其他答案中看到的那样：

ng-click not working from dynamically generated HTML

希望它有所帮助！

点击动态元素

3 个答案: