How to add DOM Elements (Angular directives) via jQuery's .append()?
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();
A complete example, from the Angular documentation:
// Angular boilerplate
var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope) {
$scope.content = {
label: "hello, world!",
};
});
// Wrap the example in a timeout so it doesn't get executed when Angular
// is first started.
setTimeout(function() {
// The new element to be added
var $div = $("<div ng-controller='MyCtrl'>new: {{content.label}}</div>");
// The parent of the new element
var $target = $("[ng-app]");
angular.element($target).injector().invoke(function($compile) {
var $scope = angular.element($target).scope();
$target.append($compile($div)($scope));
// Finally, refresh the watch expressions in the new element
$scope.$apply();
});
}, 100);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">old: {{content.label}}</div>
</div>Ideally you should avoid doing that.
However, if you really, really, really need to, then you can inject and use the $compile service followed by an element.append.
If your directive doesn't need access to a specific scope, then you can even assign the $compile and $rootScope service to window in the run function of your application's module and then use them from outside the angular context by creating a new scope ($rootScope.new()) and wrap the appending of element by using $rootScope.apply().