How to get all directive names in a given angular app?

Question

Say I have an angular app, that has some modules and some directives.
I want to get a list of all the defined directives in this app.

For example:

var myModule = angular.module('myModule', [function(){...}]);
myModule.directive('myDirective', [function () {...}]);
myModule.directive('myOtherDirective', [function () {...}]);
var myOtherModule = angular.module('myOtherModule', [function(){...}]);
myOtherModule.directive('thirdDirective', [function () {...}]);

I want to write a function getAllDirectives() that will return ['myDirective','myOtherDirective','thirdDirective'].

Also if possible I would also like to know which module each directive belongs to:

{
    'myModule': ['myDirective','myOtherDirective'],
    'myOtherModule':['thirdDirective']
}

How can this be done?
Please note that I need to do this from outside the app itself and after it has already loaded. I do have access to anything publicly available on the page, such as the angular object and the DOM.

Catalin MUNTEANU · Accepted Answer · 2016-10-18T10:07:59.680

5

You can get all the directives defined in each module using a custom function like this one:

function get_directives(name) {
    var result  = [],
        invokes = angular.module(name)._invokeQueue;

    for(var i=0; i<invokes.length; ++i) {
        if(invokes[i][1] == "directive") {
            result.push(invokes[i][2][0]);
        }
    }

    return result;
}

var result = {
    'myModule':      get_directives('myModule'),
    'myOtherModule': get_directives('myOtherModule'),
};

You could also inspect angular.module('module_name')._invokeQueue list for future knowledge.

edited Oct 18 '16 at 10:07

answered Apr 01 '15 at 12:54

Catalin MUNTEANU

5,618
2
35
43

That's great, Thanks! is there also a way to find out the module names if I don't know them in advance? – Malki Apr 01 '15 at 12:58
I'm not sure you can get that list without some tweaks. Take a look at this question which has a nice solution for storing the modules. http://stackoverflow.com/questions/24889783/angularjs-get-list-of-all-registered-modules – Catalin MUNTEANU Apr 01 '15 at 13:02
int i=0 does not compile – activedecay Oct 17 '16 at 16:11
My bad, int should be var. – Catalin MUNTEANU Oct 18 '16 at 10:08

Siva Kannan · Answer 2 · 2018-04-06T07:21:02.043

Solution The below function will return all the directives under a module

function getAllDirectives(moduleName) {
    var directives = [];
    var invokes = angular.module(moduleName)._invokeQueue;
    for (var i in invokes) {
        if (invokes[i][1] === "directive") directives.push(invokes[i][2]);
    }
    return directives;
}


getAllDirectives('school') //'school' is module name

Additional

Incase if you want a directive definition of a module

var getDirectiveDef = function(dirName, appName){
     dirName = converToCamelCase(dirName);//converting dirname to camelCase if it has hyphen
     var allDirs = getAllDirectives(appName) //the above mentioned functoin
     _.each(allDirs, function(directive){
         if(directive[0] == dirName){
             console.log(directive);
         }
     })
}

function getAllDirectives(moduleName) {
        var directives = [];
        var invokes = angular.module(moduleName)._invokeQueue;
        for (var i in invokes) {
            if (invokes[i][1] === "directive") directives.push(invokes[i][2]);
        }
        return directives;
    }

//used to convert incase if the directive name is not in camelCase input
function converToCamelCase (string) {
    return string.replace( /-([a-z])/ig, function( all, letter ) {
        return letter.toUpperCase();
    });
}

example

getDirectiveDef('play-ground', 'school')
[or]
getDirectiveDef('playGround', 'school')

will print the difinition of a directive playGround under school direcitve

How to get all directive names in a given angular app?

2 Answers2