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

发现了这个问题。看起来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) {

            }
        };
    });

Answer 2

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

希望我的答案对你有用。

用于显示错误消息的指令

2 个答案: