Question

我使用$ asyncValidators检查电子邮件是否可用。我只有一个控制器和模板用于两种模式：＆＃39; new＆＃39;并且＆＃39;编辑＆＃39;。我为这个检查创建了一个指令。但是在＆＃39;编辑＆＃39;模式，我不想查看当前的电子邮件。因此，在我的控制器中，我创建了$ scope.initialEmail来将其与输入的电子邮件进行比较。但我不知道如何在指令中使用它（对于编辑模式）。

模板：

 <input id="email" name="email" type="email" class="form-control" 
 placeholder="{{'placeholders_email'|i18n}}" 
 ng-model="user.email" ng-required="true" email-available/>

 <ng-messages for="myForm.email.$error" ng-if="myForm.email.$dirty">
 <ng-message class="red" when="emailAvailable">{{'email_exists_in_db'|i18n}}</ng-message>
 ...

控制器：

 //formMode is injected in controller ('new' or 'edit')
 $scope.formMode = angular.copy(formMode); 
 $scope.user = {email: '...', ...};
 switch(formMode){
     case 'edit':
          $scope.initialEmail = angular.copy($scope.user.email);
          break;
 }

工厂：

 //AuthHttp is an auth service using $http
 angular.module('myapp').factory('EmailAvailableValidator', ['$q', 'AuthHttp', function($q, AuthHttp) {
return function(email) {        
    var deferred = $q.defer();
    AuthHttp.get('/rest/users/emailAvailable/'+email).then(function() {
        deferred.resolve();
    }, function() {
        deferred.reject();
    });
    return deferred.promise;
}}]);

指令：

 angular.module('myapp').directive('emailAvailable', ['EmailAvailableValidator', function(EmailAvailableValidator) {
    return {
        restrict: "A",
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            switch(scope.formMode){
                case 'new':
                    ngModel.$asyncValidators.emailAvailable = EmailAvailableValidator;
                    break;
                case 'edit':
                    ngModel.$asyncValidators.emailAvailable = function(email){ // ?
                        if(!_.isEqual(scope.initialEmail, ngModel.$modelValue)){ // ?
                            return EmailAvailableValidator; // ??
                        }
                    };
                    break;
            }
        }
    }
}]);

Answer 1

解决方案是为编辑模式添加$ q.when，如下所示：

工厂：

  angular.module('myapp').factory('UsersService', ['AuthHttp', '$q', function (AuthHttp, $q) {
    return {

        emailAvailable: function(email){
            var deferred = $q.defer();
            AuthHttp.get('/rest/users/emailAvailable/'+email).then(function() {
                deferred.resolve();
            }, function() {
                deferred.reject();
            });
            return deferred.promise;
        }
    }
}]);

指令：

angular.module('myapp').directive('emailAvailable', ['UsersService', '$q',  function(UsersService, $q) {
    return {
        restrict: "A",
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            switch(scope.formMode){
                case 'new':
                    ngModel.$asyncValidators.emailAvailable = function(modelValue, viewValue) {
                        return UsersService.emailAvailable(modelValue || viewValue);
                    };
                    break;
                case 'edit':
                    ngModel.$asyncValidators.emailAvailable = function(modelValue, viewValue){
                        var newValue = modelValue || viewValue;
                        var promise;
                        if(!_.isEqual(scope.initialEmail, newValue)){
                            promise = UsersService.emailAvailable(newValue);
                        } else {
                            promise = $q.when(!_.isEqual(scope.initialEmail, newValue));
                        }
                        return promise;
                    };
                    break;
            }
        }
    }
}]);

带有params的$ asyncValidators，用于两种模式（＆＃39; new＆＃39;和＃39; edit＆＃39;表单）

1 个答案: