How to create a directive inside a service in angular js?

Question

I need to create a directive inside angular service and then on an event insert element with that directive into dom and compile it, the inserting and compiling seems to be working fine, but it seems that directives created dynamically from inside angular (controller, service or wherever) don't register or something.

Here's a simplified version of my current code

var dirs = angular.module('dirs', []);

dirs.factory('directiveCreator', function($rootScope) {

    var creator = {};

    creator.addDirective = function(config) {

        dirs.directive(config.name, function() {
            return {
               restrict: config.restrict,
               template: config.template,
               replace: config.replace,
           }
       });

       //insert element with the directive above into DOM on this event and compile
       $rootScope.$broadcast('directive.added');

    }

    return creator;
}

The directive is added to invokeQueue properly on the module, but it doesn't work at all, am I missing something?

Patrick Evans · Accepted Answer · 2014-07-11 13:53:30Z

3

you need to capture the $compileProvider and then use the directive method instead of using the moduleObj.directive method

var dirs = angular.module('dirs', []);
dirs.config(function($compileProvider){
   dirs.compileProvider = $compileProvider;
});

then when you need to dynamically include the new directive

creator.addDirective = function(config) {
    dirs.compileProvider.directive(config.name, function() {
        return {
           restrict: config.restrict,
           template: config.template,
           replace: config.replace,
       }
   });
   //insert element with the directive above into DOM on this event and compile
   $rootScope.$broadcast('directive.added');
}

This is lazy loading, Here is an article that I found helpful in doing such things

answered Jul 11, 2014 at 13:53

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create a directive inside a service in angular js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related