Angular directive in separate files error

Published on 2024-04-24 by Raul

I've learned something about Angular's namespaces the hard way: by trial and error.

Take the code below: what I wanted to accomplish is to declare 2 directives, in the same namespace, and then use them in my code. But only one will work, and you will see no error. What can be wrong with it?

angular.module('app.directives', [])
    .directive('dir1', function ($filter, $http, $sce, $rootScope) {
...
}

angular.module('app.directives', [])
    .directive('dir2', function ($filter, $http, $sce, $rootScope) {
...
}

What's wrong is declaring a second parameter, the '[]' part, is actually telling angular to create a new namespace. To use an existing namespace, you will need to ommit the second parameter, like below:

angular.module('app.directives')
    .directive('dir1', function ($filter, $http, $sce, $rootScope) {
...
}

angular.module('app.directives')
    .directive('dir2', function ($filter, $http, $sce, $rootScope) {
...
}

 


Keep in touch


About

Hey there, I'm Raul, owner of CreativeCLR, a small consulting company.

Feel free to drop me any question you might have on this post using the comment section or the contact page.