How to recompile a directive upon inserting into DOM (angularjs)

Question

Okay, so I've created a directive let's say

<calendar></calendar>

It gets rendered as I expected so everything works fine. Now, my question is how to (re)render it when inserted into DOM? I don't want to use it on my page all the time, I just want to dynamically add it and render just when I need it to (it's a part of a module), let's say, ideally I want it to appear like

$("body").append("<calendar></calendar>")

How can I achieve this with angularjs?

Answer 1

You need to write below two lines wherever you want to inject your directive element to DOM, don't forget to add $document & $compile dependency wherever you use it.

var template = '<calender></calender>',
    body = $document.find('body');
body.append($compile(template)(scope));

Answer 2

It can be achieved with angular element:

angular.element('body').append($compile("<calendar></calendar>")($scope));

Answer 3

The sequence of actions is this:

1. Create DOM element or angular.element object:

   var calendar = angular.element('<calendar></calendar>'),
   

2. Pass it to $compile service. At this stage you need to provide necessary scope object:

   $compile(calendar)(scope);
   

3. Append calendar element to document:

   angular.element('body').append(calendar);
   

So all together it looks like:

var calendar = angular.element('<calendar></calendar>');
$compile(calendar)(scope);
angular.element('body').append(calendar);

Answer 4

You can use the $compile service to recompile it and use angular.element('body').append to append it to the page again. E.g.:

    var el = $compile( "<calendar></calendar>" )( $scope );
    angular.element('body').append( el );