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>

它无法正常工作 - 消息不会出现 - 没有任何错误。在消息显示中，我还想添加类＆＃39;错误＆＃39;到了＃div ;field＆＃39;，但它应该很容易。

任何想法如何使这个指令工作或者如何以另一种更舒适的方式处理它？</ p>

Answer 1

你犯了一个错误，你应该用

将属性传递给指令

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

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

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

AngularJS来自ngMessages

1 个答案: