Use angular compileProvider outside config block

Question

I'm trying to create directives on the fly, actually I achived that, but seams pretty hacky.

This was my first approach:

function create(myDir) {
   angular.module("app").directive(myDir.name, function() {
   return {
     template:myDir.template
   };
  });
}

It didn't work because you can't register directives after application started.

based on this post: http://weblogs.thinktecture.com/pawel/2014/07/angularjs-dynamic-directives.html

I found out that I could use compileProvider to do the work, but since compileProvider isn't available outside config block, you need to put it out, so I did:

var provider = {};
angular.module("app",[]);        

angular.module('app')
.config(function ($compileProvider) {
    //It feels hacky to me too.
    angular.copy($compileProvider, provider);
 });
....

function create(myDir) {
    provider.directive.apply(null, [myDir.name, function () { 
        return { template: myDir.template } }]);
    render(myDir); //This render a new instance of my new directive
}

Surprisingly it worked. But I can't feel like being hacking the compileProvider , because I'm using it not in the way it was suppose to be, I would really like to know if is it possible to use the compileProvider properly after the application has started.

Answer 1

There is a list of dependencies that can be injected to config blocks (these are built-in $provide , $injector and all service providers) and a list of dependencies that can be injected to everywhere else (service instances and good old $injector ). As you can see all that constant does is adding the dependency to both lists .

A common recipe for using providers outside config is

app.config(function ($provide, $compileProvider) {
  $provide.constant('$compileProvider', $compileProvider);
});