AngularJS сделать директиву ngMessages

Question

Я хочу создать директиву, которая позволит мне генерировать сообщение проверки возле входа - на основе ngMessages (как в примере) .I имеют этот рабочий пример 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: '=' 
    }, 

@ выжидать для передачи значений строк, а не объектов и ошибок объекта, поэтому передавая его таким образом, не будет работать, как ожидалось. Конечно, вы можете использовать attr. $ Наблюдать и JSON.parse, но это не то, что вы хотите сделать здесь.

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