How to compile a directive which is loaded dynamically onclick event?

Question

In my app.js I have

$scope.onclick = function(){
         // appending directve "exmDir" to body. 
           document.body.setAttribute('exm-dir', '');
}

The exm-dir is appending to body but it doesn't show its contents. How can I compile? Please help me.

Check out: https://docs.angularjs.org/api/ng/service/$compile. Prob in your case $compile(document.body)($scope); — Developer, Dec 09 '16 at 11:46
In which controller I should write? If I have `mainController` to the body and `dirCntrl` to the `exm-dir`. — Mr_Perfect, Dec 09 '16 at 11:49
inside `$scope.onclick` method after injecting `exm-dir` directive — Developer, Dec 09 '16 at 11:52
but the directive content is replacing previous data & not showing even after I removed the directive from the element and recompiled again — Mr_Perfect, Dec 09 '16 at 12:17

score 0 · Answer 1 · answered Dec 09 '16 at 11:58

0

You can do like

function compile(element){ var el = angular.element(element); $scope = el.scope(); $injector = el.injector(); $injector.invoke(function($compile){ $compile(el)($scope) }) }

$scope.onclick = function(){ // appending directve "exmDir" to body. var el = document.body; el.setAttribute("exm-dir", ""); compile(el); }

answered Dec 09 '16 at 11:58

Raj

321
1
4

showing injector() scope() are not functions of element – Mr_Perfect Dec 09 '16 at 12:15

How to compile a directive which is loaded dynamically onclick event?

1 Answers1