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

myrcutio · Accepted Answer · 2015-02-28 19:48:39Z

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.

answered Feb 28, 2015 at 19:48

myrcutio

1,0659 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Sahu · Accepted Answer · 2015-02-28 19:44:24Z

0

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" ));

answered Feb 28, 2015 at 19:44

Ravi Sahu

9101 gold badge12 silver badges24 bronze badges

1 Comment

alext Over a year ago

it says ReferenceError: $compile is not defined, and i have $compile injected in my controller.

Collectives™ on Stack Overflow

Appending JQuery element and Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related