Javascript AngularJS名称可用性

我有以下指令来检查用户名的可用性。但不管服务器返回的结果如何，表单仍然禁用了提交按钮

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'World';

});
    myApp.directive('verifyStore', function($timeout, $q, $http) {
      return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, elm, attr, model) { 
          model.$asyncValidators.usernameExists = function() { 
            //here you should access the backend, to check if username exists
            //and return a promise
             return $http.get('/api/verifystore').then(function(res){
              $timeout(function(){
                model.$setValidity('usernameExists', true); ---> or false button still disabled
              }, 1000);
            }); 
          };

        }
      } 
    });

    <div class="form-group">
        <input type="text" verify-store ng-model="storename" class="form-control" name="merchant.store_name" placeholder="Store Name" ng-model-options="{ updateOn: 'blur' }" required>
        <div ng-if="signupForm.$pending.usernameExists">checking....</div>
        <div ng-if="signupForm.$error.usernameExists">username exists already</div>
        </div>

var-app=angular.module（'app'，[]）；
app.controller（'MainCtrl'，函数（$scope，$http）{
$scope.name='World'；
});
指令（'verifyStore'，函数（$timeout，$q，$http）{
返回{
限制：“AE”，
要求：'ngModel'，
链接：函数（范围、elm、属性、模型）{
模型。$asyncValidators.usernameExists=function（）{
//在这里，您应该访问后端，以检查用户名是否存在
//并回报一个承诺
返回$http.get（'/api/verifystore'）。然后（函数（res）{
$timeout（函数（）{
model.$setValidity（'usernameExists'，true）；-->或false按钮仍处于禁用状态
}, 1000);
}); 
};
}
} 
});
检查。。。。
用户名已存在

“提交”按钮

<button type="submit" ng-disabled="signupForm.$invalid" class="btn btn-primary pull-right">
                            Submit <i class="fa fa-arrow-circle-right"></i>
                        </button>

提交

---

谢谢

用户名存在时，您的承诺需要拒绝

     model.$asyncValidators.usernameExists = function() { 
         return $http.get('/api/verifystore').then(function(res){
             return res ? $q.reject('that username exists') : res;
         }); 
      };

---

来源：$asyncValidators

当用户名存在时，您的承诺需要拒绝

     model.$asyncValidators.usernameExists = function() { 
         return $http.get('/api/verifystore').then(function(res){
             return res ? $q.reject('that username exists') : res;
         }); 
      };

---

来源：$asyncValidators

如果您的服务器接受用户名，您必须解析承诺。 只需返回

true

即可。 如果用户名已经存在，你必须拒绝承诺，就像TKrugg已经提到的那样

看看这个小盒子。不要使用$timeout服务，只需执行服务器调用即可

app.directive('verifyStore', function($timeout, $q, $http) {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, elm, attr, model) { 
            model.$asyncValidators.usernameExists = function(modelValue, viewValue) {
                //here you should access the backend, to check if username exists
                //and return a promise
                return $http.get([yourUrl]).then(function(response) {
                    if (!response.data.validUsername) {
                        return $q.reject(response.data.errorMessage);
                    }
                    return true;
                });
            };
        }
    };
});

---

如果您的服务器接受用户名，您必须解析承诺。 只需返回

true

即可。 如果用户名已经存在，你必须拒绝承诺，就像TKrugg已经提到的那样

看看这个小盒子。不要使用$timeout服务，只需执行服务器调用即可

app.directive('verifyStore', function($timeout, $q, $http) {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function(scope, elm, attr, model) { 
            model.$asyncValidators.usernameExists = function(modelValue, viewValue) {
                //here you should access the backend, to check if username exists
                //and return a promise
                return $http.get([yourUrl]).then(function(response) {
                    if (!response.data.validUsername) {
                        return $q.reject(response.data.errorMessage);
                    }
                    return true;
                });
            };
        }
    };
});