AngularJS module.directive not responding consistently

Question

I have 3 directives that have slightly different algorithms to parse an input value.

angular.module('numeric', []).directive('doublesrange', function() {...} );   
angular.module('numeric', []).directive('integersrange', function() {...} );  
angular.module('numeric', []).directive('doublesnorange', function() {...} );  

They basically parse values from a text box.

<td><input ng-model="odSphere" class="doublesnorange" minvalue="-25" maxvalue="25"></td>  

The problem is, only 'doublesnorange' is responding. I've seen all three work during development, but when I added the third one, the other two stopped working. They didn't respond when I undid the changes, either.

The directive content is working, if I place the 'doublesrange' code under 'doublesnorange', it will execute. Does anybody know why the first two would fail to respond?

Answer 1

The problem, is that every time you call angular.module('numeric', []) numeric module is being redeclared. You need to declare it only once, and reference later.

To reference module you should not use second argument: angular.module('numeric'). So correct code is:

angular.module('numeric', []).directive('doublesrange', function() {...} );   
angular.module('numeric').directive('integersrange', function() {...} );  
angular.module('numeric').directive('doublesnorange', function() {...} );  

You can go one step further and use chaining to declare multiple directive for a single module:

angular.module('numeric', [])
    .directive('doublesrange', function() {...} )
    .directive('integersrange', function() {...} )
    .directive('doublesnorange', function() {...} );