How to add DOM Elements (Angular directives) via jQuery's .append()?
angularjs, jquery
Solution
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();
Problem
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.