How to add DOM Elements (Angular directives) via jQuery's .append()?

Question

Is there any way to add an element that is an Angular directive with jQuery methods like append() and have Angular do its compilation/linking to make it work as though you'd included the directive in the first place?

Example:

app.directive('myAngularDirective', [function () {     ...     // Lots of stuff in here; works when used normally but not when added via jQuery });  $("body").append("<my-angular-directive />"); 

It currently just appends an empty DOM element called "my-angular-directive," but Angular doesn't kick in and do its magic.

Answer 1

The right way to go is to use: $compile and in case your directive returns: directive definition object (which is btw. the recommended way to go) you can then call link function on it (to inject scope, for example).

$('body').append($compile("<my-angular-directive />")(scope)); scope.$apply();