CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Carteră Veaceslav
Carteră Veaceslav

Reputation: 109

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

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?

Upvotes: 6

Views: 4164

Answers (4)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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

Upvotes: 3

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28588

It can be achieved with angular element:

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

Upvotes: 2

Dani&#235;l Smink
Dani&#235;l Smink

Reputation: 368

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

Upvotes: 0

dfsq
dfsq

Reputation: 193301

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

Upvotes: 1

Related Questions