Question

我是AngularJS的新手，在玩它时，我遇到了这个问题....我有一个这样的表：

...
<tr ng-repeat="line in lines">
<remove-line>
            <input id="line_id" type="hidden" value="{{line.id}}">
            <td id="sn">{{$index+1}}</td>
            <td>{{line.ref}}</td>
            <td>{{line.label}}</td>
            <td class="tva">{{line.tva}}</td>
            <td class="qty">{{line.qty}}</td>
            <td class="unity">{{line.unity}}</td>
            <td class="prix">{{line.prix}}</td>
            <td>{{line.prix*line.qty}}</td>

            <td><button class="btn" id= "remove"><i class="icon-remove"></i> </button></td>
         </remove-line>
        </tr>
...

我希望在使用自定义指令单击删除按钮时有一些行为。 AngularJS代码如下所示：

angular.module('myApp', []).directive('removeLine',function(){
    var remove = function(){
    ...
        alert ("Oops removed!");
    }

    return {
           restrict: 'E',
           link : function(scope,element, attrs){
               $("#remove").on('click', remove);

           }


    };
});

但这不起作用....当我点击表格中的删除按钮时没有任何反应.....但当按钮超出标签时，所有这一切都正常。为什么会如此以及如何使其发挥作用？

我创建了jsfiddle来说明我的情况http://jsfiddle.net/alexrussinov/cs8RP/71/。有什么奇怪的是，当我在我的本地机器上测试这个代码时，表格中的按钮不起作用，但在它下面有两个独立的，工作正常。在jsfiddle，既不在表中也不在它下面，它不起作用。

Answer 1

您不能在具有相同ID的页面上拥有多个元素，这就是您使用该按钮所做的事情。

我认为最简单的解决方案是将remove()调用直接粘贴到带有ng-click的按钮标记中，并传入您要删除的行。这当然假定您的remove()方法是$scope的一部分。

<button class="btn" ng-click="remove(line)"><i class="icon-remove"></i></button>

无法对ng-repeat指令内的按钮调用操作

1 个答案: