how can we use $compile outside a directive in Angularjs

Question

I want to use $compile in a controller inside a function and not in a directive. is it possible? I am trying the below code.

$compile('<div ng-attr-tooltip="test">Cancel</div>')(scope) 

But this is throwing scope is undefined error. I tried to pass $scope inside the function but it is not working.

Answer 1

How would Angular know that you changed the DOM? You need to compile your html before appending it (using $compile service).

If you absolutely need access outside of a directive you can create an injector.

$(function() {   // myApp for test directive to work, ng for $compile   var $injector = angular.injector(['ng', 'myApp']);   $injector.invoke(function($rootScope, $compile) {     $('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));   }); }); 

Answer 2

It's worth to note, the injector in previous answer (var $injector = angular.injector(['ng', 'myApp']);) will not append compiling directive to your currently running angular app, it will create new instead.

To dynamically append new directives to your app, you should use already existed injector:

$(function() {   angular.element(document).injector().invoke(function($rootScope, $compile) {     $('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));   }); }); 

See last paragraph in documentation.