Я хочу создать директиву, которая позволяет мне генерировать валидационное сообщение возле ввода - на основе 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', но это должно быть легко.
Любая идея, как сделать эту директиву, или, может быть, как справиться с этим другим, более удобным способом?
Вы сделали ошибку, вы должны передать атрибуты директиве с
scope: {
statement: '=',
error: '='
},
@biding предназначен для передачи строковых значений, а не объектов, а ошибка - это объект, поэтому передача его таким образом не будет работать должным образом. Конечно, вы можете использовать attr. $ Наблюдать и JSON.parse, но это не то, что вы хотите сделать здесь.