Question

我有一个来自templateUrl的Angular'E'指令，它描述了一个包含ng-repeat生成行的表。在我的link指定中，我正在尝试将事件侦听器添加到该表中的按钮。

指令：

    .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 - ＆gt; Bootstrap - ＆gt;角度 - ＆gt;根据类似的问题，AngularDirective，这应该不是问题。

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

$('.approve').click()不起作用。

console.log($('.approve'))返回[]。

console.log(elem.children().children())返回[tbody]

console.log(elem.find('button'))返回[]。

elem.find('tr').click() 适用于表格的第一行，而不适用于第二行（应该找不到与选择器匹配的所有元素的集合？）

在控制台中，$('.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链接中不起作用

1 个答案: