如何在Angular.js中的index.html页面中调用指令中的函数

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

我是Angular.js的新手,所以我在从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.

当用户输入他的电话号码时,我必须在Directives.js中调用函数来验证该号码是否已经存在。但我没有得到如何调用该功能。

my html page

我的HTML页面

<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:

我的Directive.js文件:

 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

谁能帮助我如何在我的html页面的指令中调用phone()函数。提前致谢

2 个解决方案

#1

Add the phone directive to your <input> element

将phone指令添加到元素

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

#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.

但是这里的东西不使用$ .ajax它不是一个角度函数,如果你想要asyn调用使用$ http是角度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

#1