0

I'm new to AngularJS, and while playing with it, i have encountered with the problem.... I have a table like this :

...
<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>
...

I want to have some behavior when clicking on the remove button, using custom directive. AngularJS code looks like :

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

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

           }


    };
});

But this doesn't work.... Nothing happens when i click on the remove button in the table..... But all this work fine when the button is out of the tag. Why is it so and how make it work?

I have created jsfiddle to illustrate my situation http://jsfiddle.net/alexrussinov/cs8RP/71/. What is strange that when I test this code on my local machine buttons in the table don't work but two separate under it, work fine. On jsfiddle, neither in the table nor below it, it doesn't work.

4

1 回答 1

2

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

我认为最简单的解决方案是将remove()调用直接粘贴在带有 的按钮标签中ng-click，并传入您希望删除的行。这当然假设您的remove()方法是$scope.

<button class="btn" ng-click="remove(line)"><i class="icon-remove"></i></button>
于 2013-04-04T22:46:06.760 回答