Appending JQuery element and Angular

Question

Using angularJS, i am appending jQuery DOM element to an ng-repeat structure, and i want the element to be able to use a method from my angular controller (removeMember). Obviously at the moment that does not work. Here is my code

$( "#table tbody" ).append( "<tr class="+id_of_member+"><td>"+user_email+"</td><td><a href=\"#/\"  ng-click=\"teamCtrl.removeMember("+id_of_member+")\">Remove The Member</a></td></tr>");

Obviously everything renders ok, but when i click the href tag, nothng happens (the ng-click does not get called). I guess AngularJS does not work for the newly appended element. How can i make the link work (call the removeMember method from angularjs teamCtrl controller).

Answer 1

You shouldn't need to append the element with jquery, you can add it immediately after the ng-repeat element.

        <table>
            <tr ng-repeat="member in memberList">
                <td>
                    member item
                </td>
            </tr>
            <tr>
                <td ng-click="removeMember()">
                    email item
                </td>
            </tr>
        </table>

Also, make sure you're defining removeMember in the $scope variable of your controller.

Answer 2

Yes you got it correct angular js will not work for newly added dom element because new DOM element is added after compilation in context of angular

to make it work you can recompile outer DOM

$( "#table tbody" ).append( "<tr class="+id_of_member+"><td>"+user_email+"</td><td><a href=\"#/\"  ng-click=\"teamCtrl.removeMember("+id_of_member+")\">Remove The Member</a></td></tr>");

$compile($( "#table tbody" ));