Javascript 如何签入表单中填写的唯一数据库值

我已经创建了一个管理联系人的应用程序。用户可以添加联系人。填写完名称后，我想检查DB中是否已经存在该值

你能帮忙吗

我已经创建了一个新的字段用户名，并创建了一个指令，但我不知道这种方式是否是最好的解决方案。查询已正确执行。但是我改进了显示结果“用户名已经存在”的一些困难（在加载过程中正确显示为“检查…”）

这里是app.js文件（带有模块和控制器“ctrlContacts”）：

var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);

// register the interceptor as a service
app.factory('HttpInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
       return {
            // On request success
            request : function(config) {
                // Return the config or wrap it in a promise if blank.
                return config || $q.when(config);
            },

            // On request failure
            requestError : function(rejection) {
                //console.log(rejection); // Contains the data about the error on the request.  
                // Return the promise rejection.
                return $q.reject(rejection);
            },

            // On response success
            response : function(response) {
                //console.log(response); // Contains the data from the response.
                // Return the response or promise.
                return response || $q.when(response);
            },

            // On response failure
            responseError : function(rejection) {
                //console.log(rejection); // Contains the data about the error.
                //Check whether the intercept param is set in the config array. 
                //If the intercept param is missing or set to true, we display a modal containing the error
                if (typeof rejection.config.intercept === 'undefined' || rejection.config.intercept)
                {
                    //emitting an event to draw a modal using angular bootstrap
                    $rootScope.$emit('errorModal', rejection.data);
                }

                // Return the promise rejection.
                return $q.reject(rejection);
            }
        };
 }]);


// MY DIRECTIVE FOR CHECKING IF THE USERNAME IS ALREADY USED
app.directive('usernameAvailable', function($timeout, $q, $http, ContactService) {
  return {
    restrict: 'AE',
    require: 'ngModel',
    link: function(scope, elm, attr, ngModel) { 
      ngModel.$asyncValidators.usernameExists = function() {   

        return ContactService.searchContactByName('ADAM').success(function(contact){
          $timeout(function(){

            ngModel.$setValidity('usernameExists', contact); 
            ngModel.$setValidity('unique', false);
            scope.contacts = contact;     
alert(contact.length);          
          }, 1000);
        }); 


      };
    }
  } 
});

app.controller('ctrlAddContacts', function ($scope, ContactService){

    $scope.title="Add a contact";   

    ContactService.getCountry().success(function(countries){
        $scope.countries = countries;       
    }); 

    ContactService.loadCategory('undefined',0).success(function(categories){
        $scope.categories = categories;
    }); 

    $scope.Category = function (contactType) {
        if (contactType){
            ContactService.loadCategory(contactType,0).success(function(categories){
            $scope.categories = categories;         
            }); 
        }
    }       

    $scope.submitForm = function(contact){
        if($scope.ContactForm.$valid){      
            ContactService.addNewPerson(contact).success(function(Person){
                $scope.ContactForm.$setPristine();
                $scope.contact= Person;
                var personID = Person[0]["ID"];
                window.location="#/view-contacts/" + personID;

            });
        }
    }
});

工厂的文件：“appServices.js”：

app.factory('ContactService', function($http){

    var factory={};

    factory.searchContactByName=function(string){
        if (string){
            chaine='http://myapp/contacts.cfc?method=searchContactByName&contactName=' + string;        
        }else{
            chaine='';      
        }
        //alert(chaine);
        return $http.get(chaine);
    };  

    return factory;

})

<h3>{{title}}</h3>
 <div class="panel panel-default">
  <div class="panel-heading">
   <div class="panel-title">Person Sheet</div>
  </div> 

  <div class="panel-body">
    <form name="ContactForm" class="form-horizontal" role="form" novalidate ng-submit="submitForm(contact)">

<!--------------------- USERNAME FIELD AND CHECK IF IT EXISTS ------------------START-->

<div>
      <input type="text" 
            name="username"
            ng-model="username" 
            username-available 
            required
            ng-model-options="{ updateOn: 'blur' }">
      <div ng-if="ContactForm.$pending.usernameExists">checking....</div>
      <div ng-if="ContactForm.$error.usernameExists">username exists already</div>
</div>

<!---------------------- USERNAME FIELD AND CHECK IF IT EXISTS --------------------END-->


      <div class="form-group">
        <label for="txtLastName" class="col-sm-2 control-label">Last Name *</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="txtLastName" maxlength="100" placeholder="Enter Last Name" required ng-model="contact.LASTNAME">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input type="submit" class="btn btn-primary" value="Submit" ng-disabled="ContactForm.$invalid">       
          <a href="#/view-contacts/{{contact.ID}}" class="inline btn btn-primary">Cancel</a>
        </div>
      </div>  

    </form> 
  </div>
 </div>

我查看的文件“manageContact.html”：

app.factory('ContactService', function($http){

    var factory={};

    factory.searchContactByName=function(string){
        if (string){
            chaine='http://myapp/contacts.cfc?method=searchContactByName&contactName=' + string;        
        }else{
            chaine='';      
        }
        //alert(chaine);
        return $http.get(chaine);
    };  

    return factory;

})

<h3>{{title}}</h3>
 <div class="panel panel-default">
  <div class="panel-heading">
   <div class="panel-title">Person Sheet</div>
  </div> 

  <div class="panel-body">
    <form name="ContactForm" class="form-horizontal" role="form" novalidate ng-submit="submitForm(contact)">

<!--------------------- USERNAME FIELD AND CHECK IF IT EXISTS ------------------START-->

<div>
      <input type="text" 
            name="username"
            ng-model="username" 
            username-available 
            required
            ng-model-options="{ updateOn: 'blur' }">
      <div ng-if="ContactForm.$pending.usernameExists">checking....</div>
      <div ng-if="ContactForm.$error.usernameExists">username exists already</div>
</div>

<!---------------------- USERNAME FIELD AND CHECK IF IT EXISTS --------------------END-->


      <div class="form-group">
        <label for="txtLastName" class="col-sm-2 control-label">Last Name *</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="txtLastName" maxlength="100" placeholder="Enter Last Name" required ng-model="contact.LASTNAME">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input type="submit" class="btn btn-primary" value="Submit" ng-disabled="ContactForm.$invalid">       
          <a href="#/view-contacts/{{contact.ID}}" class="inline btn btn-primary">Cancel</a>
        </div>
      </div>  

    </form> 
  </div>
 </div>

{{title}
人员表
检查。。。。
用户名已存在
姓*

提前感谢您的帮助

关于，

应该是

  <div ng-if="ContactForm.$pending.usernameExists">checking....</div>
  <div ng-if="ContactForm.username.$error.unique">username exists already</div>

正在检查。。。。
用户名已存在

使用

ng show

和

ng hide

而不是

ng if

<div ng-show="ContactForm.$pending.usernameExists">checking....</div>
<div ng-show="ContactForm.$error.usernameExists">username exists already</div>

正在检查。。。。
用户名已存在

事实上，我已经看到我的指令不再有效了。你能告诉我它是否正确实现了吗？我已经这样做了，但是我得到了这个错误：“错误：ngModel没有定义。link/model.$asyncValidators.usernameExists/如果可能，你能提供一个plunker吗？很抱歉，我不能提供给你。我认为我的指示不正确。查询已正确执行，但之后的处理不正常。我解决了下面的问题，但当用户名已被使用时，不会显示消息。我更新了主题中的指令。