Come ricompilare una direttiva dopo l'inserimento nel DOM (angularjs)

Question

Va bene, così ho creato una direttiva diciamo

<calendar></calendar> 

Essa viene reso come mi aspettavo così tutto funziona bene. Ora, la mia domanda è come (ri) renderlo quando inserito nel DOM? Non voglio usarlo sempre sulla mia pagina, voglio solo aggiungerlo dinamicamente e renderizzarlo solo quando ne ho bisogno (è una parte di un modulo), diciamo, idealmente voglio che appaia come

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

Come posso ottenere questo con angularjs?

Answer 1

È necessario scrivere due righe di sotto dove si vuole iniettare il vostro elemento direttiva per DOM, non dimenticare di aggiungere $document & Dipendenza $compile ovunque tu la usi.

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

Answer 2

La sequenza delle azioni è questo:

1. Crea elemento DOM o angular.element oggetto:

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

2. passarlo al $compile servizio. In questa fase è necessario fornire necessarie oggetto campo di applicazione:

   $compile(calendar)(scope); 
   

3. Append calendar elemento di documento:

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

Quindi tutti insieme appare come:

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

Answer 3

È puoi usare il servizio $ compile per ricompilarlo e usare angular.element ('body'). append per aggiungerlo al pa ge di nuovo. Ad esempio:

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

Answer 4

Può essere realizzato con elemento angolare:

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