AngularJS中的多个指令

Question

I have defined two directives for 2 divs: one for validating phone number and another for email validation. The problem here is that when I run it, it will execute only one validation that is given as second in the directives.js file. In the HTML page I have two different divs for phone number and email. How can I solve this?

<div id=maindiv><div class="number"><input id="Cont_No" name="phone" type="text" data-phone placeholder="ENTER NUMBER" ng-model="phone"/></div><div class="mail"  ><input id="Cust_Email" name="email" type="email" data-email placeholder="ENTER EMAIL" ng-model="email" /></div></maindiv>.

Html is given above .Directive description is given below

angular.module('myApp.directives', []).directive('email', function() {
return {
    restrice: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        angular.element(element).bind('blur', function() {
//some code
});              
    }            
}        

});

angular.module('myApp.directives', []).directive('phone', function() {
return {
    restrice: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      //console.log("helo");
        angular.element(element).bind('blur', function() {
//some code
 });              
    }            
}        
});

here only the phone directive is geting executed.if i rearrange the orser only email directive gets executing.

Answer 1

I'm not sure but I believe the problem might be you are basically overriding the module by calling module('moduleName', []) twice.

Try calling the first directive with module('moduleName', []) and the second with module('moduleName')

Answer 2

Hy, i think your mapping something wrong. Try my example with your code . It seems you don't init the modules.