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.

My suspicion is that you'll need to tell Angular that the new element now exists, as it probably didnt exist on doc Ready if youre adding it dynamically — hammus, Nov 18 '13 at 22:26

score 77 · Accepted Answer · answered Nov 18 '13 at 22:37

77

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

answered Nov 18 '13 at 22:37

artur grzesiak

19,685
5
45
55

3

your code is not complete. can u please post a jsfiddle version your code. – Monojit Sarkar May 11 '16 at 13:36
What if you're already inside a `$digest` cycle? Perhaps use `$timeout` instead. – Ivan Rubinson Aug 09 '18 at 13:32

David Wolever · Answer 2 · 2015-08-06T01:12:55.497

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>

seems the simplest solution to me. – dewd Nov 16 '18 at 13:45 — dewd, Nov 16 '18 at 13:45
OP was asking for directive. – Rafael Herscovici Mar 26 '19 at 16:40 — Rafael Herscovici, Mar 26 '19 at 16:40

score 2 · Answer 3 · edited Oct 01 '14 at 18:18

2

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

edited Oct 01 '14 at 18:18

eabraham

4,069
1
22
29

answered Nov 18 '13 at 22:38

musically_ut

33,668
8
90
106

11

Why should appending elements dinamically be avoided? Is there an alternative? – Marcos Pereira Jan 19 '15 at 22:19
I guess you would have that directive in a view and use something like ui.router to put the view in a ui-view – Neil Sep 17 '15 at 14:42

score 2 · Answer 4 · answered Sep 07 '16 at 15:35

The accepted answer didn't provide a complete example, here's one:

https://codepen.io/rhinojosahdz/pen/ZpGLZG

<body ng-app="app" ng-controller="Ctrl1 as ctrl1">
</body>
<script>
angular.module('app',[])
.controller('Ctrl1', ['$scope', '$compile', function($scope, $compile){
    var vm = this;
    vm.x = 123;
    $('body').append($compile("<hola x='ctrl1.x' />")($scope));
}])
.directive('hola', function(){
    return {
        template: '<div ng-click="vm.alertXFromGivenScope()">click me!</div>'
        ,scope: {
            x : '='
        }
        ,controller: function(){
            var vm = this;
            vm.alertXFromGivenScope = function(){
                alert(vm.x);                
            };
        }
        ,controllerAs: 'vm'
        ,bindToController: true
    }
})
<script>

score 1 · Answer 5 · edited May 23 '17 at 11:46

1

You really want to avoid doing any jquery if you can, but I ran into a similar problem not too long ago, here was my question and the correct answer that should be able to help you out. The short answer is using $compile.

edited May 23 '17 at 11:46

Community

1
1

answered Nov 18 '13 at 22:39

Ty Danielson

679
1
8
19

score 0 · Answer 6 · answered Apr 27 '17 at 10:19

0

Try this

angular.element($("#appendToDiv")).append($compile("<my-angular-directive />")($scope));

answered Apr 27 '17 at 10:19

Hari Das

9,108
7
52
58

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

6 Answers6

Linked