elem.find() 在 AngularJS link 中不起作用

Question

我有一个来自 templateUrl 的 Angular 'E' 指令，它描述了一个 table 和 ng-repeat 生成的行。在我的 link 名称中，我试图将事件侦听器添加到 table 中的按钮。

指令：

    .directive("reqParts", ["$http", function($http){
   return {
       restrict: 'E',
       templateUrl: '/public/reqParts.html',
       link: function(scope, elem, attr){
           elem.find('.approve').click(function(){
               console.log("clicked");
           });
       }
   };

templateUrl:

<table class="table table-striped">
<tr>
    <th>User</th>
    <th>Title</th>
    <th>Waiting List</th>
</tr>
<tr ng-repeat="req in requests">
    <td>{{req.requestedBy[0].uname}}</td>
    <td>{{req.title}}</td>
    <td>{{req.requestedBy.length - 1}}</td>
    <td><button class='approve'>Approve</button></td>
</tr></table>

我的加载顺序是Jquery -> Bootstrap -> Angular -> Angular指令，所以应该不是问题，根据类似的问题.

编辑：我尝试过的一些事情：

$('.approve').click() does not work.

console.log($('.approve')) returns [].

console.log(elem.children().children()) returns [tbody]

console.log(elem.find('button')) returns [].

elem.find('tr').click() works for the first row of the table, not the second (Shouldn't find give me the set of all elements matching the selector?)

在控制台中，$('.approve') 有效，`$('table').find('.approve') 有效。

Answer 1

谢谢大家的建议！事实证明，问题不在于 JQuery，而在于 ng-repeat。我遵循了此处描述的解决方法：AngularJS: Linking to elements in a directive that uses ng-repeat

创建一个在 ng-repeat 完成时发出事件的指令属性，传递的第二个参数是 JQuery 包装行，它与 .find()

完美配合

elem.find() 在 AngularJS link 中不起作用

elem.find() is not working in AngularJS link

jquery

angularjs

angularjs-directive

jqlite