AngularJS 从 ngMessages 生成指令

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>

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

知道如何使该指令起作用或者如何以另一种更舒适的方式处理它吗？

Answer 1

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

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

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

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

AngularJS 从 ngMessages 生成指令

AngularJS make directive from ngMessages

html

javascript

frontend

angularjs