How to call a function in directives from index.html page in Angular.js

Question

I am newbie to Angular.js so i am facing a problem while calling the function in directives from index.html.

When the user enter his phone number i have to call function in Directives.js which is to validate is the number is already exist or not. But i am not getting how to call the function.

my html page

<div class="form-group" ng-class="{ 'has-error' : userForm.contactno.$invalid  && (userForm.contactno.$dirty || submitted) }">
                <label>ContactNo</label>
                <input type="text" name="contactno" class="form-control" ng-model="user.phone" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">
                <p ng-show="userForm.contactno.$error.pattern  && (userForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contactno.</p>
            </div>

my Directive.js file:

 myAppDirectives.
 directive('phone', function() {
  return {
      restrice: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl) {
          console.log("test1");
          angular.element(element).bind('blur', function() {
          var phnNum = this.value;
      $.ajax({
          url: 'http://localhost:8989/users/'+phnNum,
          dataType: 'application/json',
          type: 'GET',

success: function( data, status, headers, cfg ){
   console.log("test2");
        console.log("data" +data);
        console.log(jqXHR.responseText);
       },
error: function( jqXHR, textStatus, errorThrown ){
       console.log("on success");
       var result=jqXHR;
       //console.log("check" +result.responseText);
       console.log(jqXHR);
       console.log(result.responseText.length);

      if(result.responseText.length===0){
        console.log("you can register now");
       }
     else{
        console.log("User with this number is already registered");
      }
   }            
});           
});              
}            
}    

});

Can anyone please help me how to call phone() function in directives from my html page. Thanks in advance

Answer 1

将phone指令添加到<input>元素

<input phone type="text" name="contactno" class="form-control" ng-model="user.phone" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">

Answer 2

You can put your directive phone as a attribute in input box:-)

<input phone type="text" name="contactno" class="form-control" ng-model="user.phone" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">

But here is the thing don't use $.ajax it is not a angular function if you want asyn calls use $http that is native service in angular js.

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Doc