AngularJS 异步验证器 - 来自服务器响应的 UI 验证消息

Question

我有一个异步验证器，调用服务将返回 200 (OK) 或 400 (BadRequest) 以及一条消息。

我想返回该消息作为验证消息，但不知道如何显示该消息。我尝试了一些方法但没有成功。

<div ng-messages="searchFilterForm.search.$error">
  <small ng-message="valid">Invalid search filter. Reason: {{MY_BAD_REQUEST_RESPONSE_MESSAGE_GOES_HERE}}</small>
</div>

Answer 1

这是一个jsfiddle:http://jsfiddle.net/javajunkie314/r6oyLe26/3/

其想法是，myValidator 和 myErrorMessage 指令通过 myErrorHandler 指令同步其错误消息。令人烦恼的是，我找不到任何方法来访问验证器传递给 reject 的原因。

编辑:我已经更新了 fiddle 。现在，myValidator 使用两个异步验证器。我还创建了一个 ValidatorPromise 来处理更新 myErrorHandler Controller 。正如我在下面的评论中所描述的那样。

HTML:

<form ng-controller="testCtrl">
    <div my-error-handler="">
        <input type="text" name="foo" ng-model="foo.text" my-validator="">
        <div my-error-message=""></div>
    </div>
</form>

JavaScript:

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

    /* Wraps a promise. Used to update the errorHandler controller when the
     * validator resolves. */
    app.factory('ValidatorPromise', function ($q) {
        return function (errorHandler, name, promise) {
            return promise.then(
                // Success
                function (value) {
                    // No error message for success.
                    delete errorHandler.error[name];
                    return value;
                },
                // Failure
                function (value) {
                    // Set the error message for failure.
                    errorHandler.error[name] = value;
                    return $q.reject(value);
                }
            );
        };
    });

    app.controller('testCtrl', function ($scope) {
        $scope.foo = {
            text: ''
        };
    });

    app.directive('myErrorHandler', function () {
        return {
            controller: function () {
                this.error = {};
            }
        };
    });

    app.directive('myValidator', function ($timeout, $q, ValidatorPromise) {
        return {
            require: ['ngModel', '^myErrorHandler'],
            link: function (scope, element, attrs, controllers) {
                var ngModel = controllers[0];
                var myErrorHandler = controllers[1];

                ngModel.$asyncValidators.test1 = function () {
                    return ValidatorPromise(
                        myErrorHandler, 'test1',
                        $timeout(function () {}, 1000).then(function () {
                            return $q.reject('Fail 1!');
                        })
                    );
                };

                ngModel.$asyncValidators.test2 = function () {
                    return ValidatorPromise(
                        myErrorHandler, 'test2',
                        $timeout(function () {}, 2000).then(function () {
                            return $q.reject('Fail 2!');
                        })
                    );
                };
            }
        };
    });

    app.directive('myErrorMessage', function () {
        return {
            require: '^myErrorHandler',
            link: function (scope, element, attrs, myErrorHandler) {
                scope.error = myErrorHandler.error;
            },
            /* This template could use ngMessages to display the errors
             * nicely. */
            template: 'Error: {{error}}'
        };
    });
})();