Adding angular js attribute after page render

Question

I have an application that contains a div with content in it. When I click a button jQuery adds a AngularJs directive to the div. After adding the directive i call scope.$apply(), but this doesn't seem to inform angular about the new directive on the div. Can someone explain to me how I can inform AngularJs about the new directive added with jQuery?

You need to $compile the newly added Angular directive. See http://stackoverflow.com/a/12049456/215945 — Mark Rajcok, Feb 12 '13 at 16:27
Yeah... what Mark said. :P I think we have the same browsing habits, this happens once a day. — Ben Lesh, Feb 12 '13 at 16:31

score 2 · Accepted Answer · answered Feb 12 '13 at 16:29

You shouldn't be adding directives to your markup with JQuery. Use Angular for that whenever possible.

That said, if you have to add directives via straight DOM manipulations like that, you'll need to use the $compile provider to compile the element and bind it to a scope before you add it.

Adding angular js attribute after page render

1 Answers1