javascript - 在动态元素上触发 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>

单击创建元素 按钮时，一个按钮将添加到#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 添加按钮，并让 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
  };
}]);