javascript - 来自 ngMessages 的 AngularJS make 指令

Question

我想创建一个指令，允许我在输入附近生成验证消息 - 基于 ngMessages(如示例所示)。我有这个有效的 HTML 示例:

<div class="field">
    <div class="ui right icon input">
        <input type="email" name="email" ng-model="vm.user.email" placeholder="E-mail" required>
        <i class="at icon"></i>
    </div>
    <div ng-messages="vm.signUpForm.email.$error" ng-show="vm.signUpForm.$submitted">
        <div ng-messages-include="shared/validation/formErrorMessages.html">   </div>
    </div>
</div>

我当前的指令:

var app = angular.module('app.directives', []);

app.directive('formError', function() {
    return {
        restrict: 'AE',
        replace: 'false',
        scope: {
            statement: '@',
            error: '@'
        },
        template: '<div ng-messages="error" ng-show="true"><div ng-messages-include="shared/validation/formErrorMessages.html"></div></div>'
    };
});

以及我如何尝试运行它:

<div form-error error="{{ vm.signUpForm.email.$error }}" statement="{{ vm.signUpForm.$submitted }}"></div>

它不起作用 - 消息不会出现 - 没有任何错误。在消息显示上，我还想将类“error”添加到“div.field”，但这应该很容易。

知道如何使该指令发挥作用，或者如何以另一种更舒适的方式处理这个问题？

Answer 1

您犯了一个错误，您应该将属性传递给指令

scope: {
      statement: '=',
      error: '='
    },

@ biding 用于传递字符串值，而不是对象，而 error 是一个对象，因此以这种方式传递它不会按预期工作。当然，您可以使用 attr.$observe 和 JSON.parse，但这不是您想要在这里做的。

https://plnkr.co/edit/iRRPqLpmqdQltNjw35Nb?p=preview