显示错误信息的指令

Question

我已经设置了验证，并且正在使用 ngMessages 来显示错误。但是我想围绕 ngMessages 创建一个包装器指令，它添加了一些 HTML （以避免大量代码重复）。

所以不必在每个输入上都写这个：

<div class="help-block validator">
    <div ng-messages="registerForm.email.$error" ng-if="registerForm.email.$touched">
        <p ng-message="required">This field is required.</p>
    </div>
</div>

我会这样写：

<error-message messages='{"required": "This field is required."}' error="registerForm.email.$error" touched="registerForm.email.$touched"></error-message>

我的指令的问题是 error 和 touched 作为字符串出现，它们没有被评估为 JS 表达式。我已经尝试 $eval 它们，但会引发错误。

这是我的指令：

angular
    .module('myApp')
    .directive("errorMessage", function () {
        return {
            restrict: "E",
            replace: true,
            scope: {
                'messages': '=',
                'error': '=',
                'touched': '='
            },
            template: '<div class="help-block validator">' +
                '<div ng-messages="error" ng-if="touched">' +
                    '<div ng-repeat="(key, message) in messages">' +
                        '<p ng-message="key">{{message}}</p>' +
                    '</div>' +
                '</div>' +
            '</div>',
            link: function (scope, elem, attrs) {
                scope.error = attrs.error;
                scope.touched = attrs.touched;
                scope.messages = scope.$eval(attrs.messages); // this works
            }
        };
    });

知道我应该怎么做吗？

Answer 1

我认为ng-message-include符合您的要求。我们可以创建新的 html 文件并将所有消息放入该文件中，然后使用 ng-messages-include 调用它。

希望我的回答对你有用。

Answer 2

发现问题。看起来 attrs 不是我需要的。这些属性已经在 scope 中。我最终得到的代码是：

angular
    .module('myApp')
    .directive("errorMessage", function () {
        return {
            restrict: "E",
            replace: true,
            scope: {
                'messages': '=',
                'error': '=',
                'touched': '='
            },
            template: '<div class="help-block validator">' +
                '<div ng-messages="error" ng-if="touched">' +
                    '<div ng-repeat="(key, message) in messages">' +
                        '<p ng-message="{{key}}">{{message}}</p>' +
                    '</div>' +
                '</div>' +
            '</div>',
            link: function (scope, elem, attrs) {

            }
        };
    });

显示错误信息的指令

Directive to show error messages

angularjs

angular-directive