Question

我有一个AngularUI Bootstrap Typeahead。它会在模型更改时触发，以过滤值。

但是，我也有一个附加到该字段的指令，应该触发onBlur。该指令搜索数据库以根据typeahead字段的输入检查是否需要另一个字段。

如果我将ng-model-options更改为模糊，我会销毁typeahead。如果我将指令更改为函数以使用ng-blur，我无法弄清楚如何处理promises和asyncValidators。

这是我的验证指令：

 angular.module('myApp').directive('myfieldValidation', ['$q', 'myService', function ($q, myService) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {

            ctrl.$asyncValidators.myfieldisvalidated = function (modelValue) {
                var defer = $q.defer();
                myService.getdetailsofField(modelValue)
                    .then(function (response) {
                       console.log(response.data);
                       if (response.data.success == false && modelValue !== undefined && modelValue !== "") {
                            scope.launchfunction();
                            defer.reject();
                        }
                        else if (response.data.success == true) {
                            scope.Name = response.data.data["Name"];
                            scope.Number = response.data.data["Number"];
                        }
                        else {
                            defer.resolve();
                        }
                    });
                return defer.promise;
            };
        }
    }
}]);

这是我的先行输入

 <input myfield-validation                   
                       type="text"                           
                       class="form-control"                         
                       name="namefield"
                       ng-model="namefield.namefield"
                       ng-change="otherfield = null"
                       uib-typeahead="option as option.objects for option in myList | filter:$viewValue | limitTo:8"
                       typeahead-template-url="/tpl.html"
                       typeahead-loading="loading"                           
                       typeahead-min-length="2"
                       typeahead-wait-ms="2"
                       typeahead-no-results="noResults"
                       required>

我可以在指令中添加一些内容以使其在模糊时触发吗？我在另一个答案中找到了这个，但我不知道如何使用它。

element.on('blur', function () {
    if (ngModel.$dirty) {
        doServerSideValidation();
    } else {
        ngModel.$setValidity(key, true);
    }
});

Answer 1

目前还不清楚你在指令中想要实现的目标。为什么要在指令中返回一个承诺？什么利用它？

如果您之后再进行服务器端验证，可以这样做吗？

<input my-validation-directive type="text" ng-model-options="{updateOn: 'default blur', debounce: { 'default': 700, 'blur': 0 }}" />

验证指令

app.directive('myValidationDirective', function(myService) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {
                //first, assume validity
                ctrl.$setValidity('myValidationDirective', true);

                //only check if value is not empty
                if(viewValue.length > 0 && !ctrl.$error.myValidationDirective) {
                    myService.getdetailsofField(viewValue).then(function(response){
                        //api returns response.data
                        if(response.data.success === false) {
                            ctrl.$setValidity('myValidationDirective', false);
                            scope.callAScopeFunction(response.data);
                        } else {
                            ctrl.$setValidity('myValidationDirective', true);
                        }
                    }).catch(function(response){
                        //error
                    });
                }
                return viewValue;
            });
        }
    };
});

两个函数 - 一个用于模糊，另一个用作角度输入字段中的模型

1 个答案: