Блог

LIVE DEMO

Я использую Angular 1.2.18 (должен поддерживать IE8), и я пытаюсь создать что-то похожее на ngMessages то, что существует в Angular 1.3:

HTML:

 <form name="form" novalidate>
  <div>
    <label for="phone">Phone:</label>
    <input id="phone" name="phone" ng-model="phone" type="text" 
           required ng-minlength="5">
    <div form-errors-for="form.phone">
      <div form-error="required">Required</div>
      <div form-error="minlength">Too short</div>
    </div>
  </div>
</form>
  

JS:

 angular.module("Validation", [])
.directive("formErrorsFor", function() {
  return {
    scope: {
      model: '=formErrorsFor'
    },
    controller: function($scope) {
      this.model = $scope.model;
    }
  };
})
.directive("formError", function() {
  return {
    require: '^formErrorsFor',
    link: function(scope, element, attrs, ctrl) {
      console.log(ctrl.model.$error); // Always {}. Why??
    }
  };
});
  

К сожалению, доступ form.phone.$error из formError директивы всегда приводит к пустому объекту. Почему у него нет свойств required and minlength ?

PLAYGROUND HERE

Я пробовал использовать jsbin. Проблема здесь в том, что вы пытаетесь получить доступ к ошибкам слишком рано. Кроме того, область действия двух директив различна.

Я изменил ваш jsbin, и, похоже, это работает. Я добавил наблюдение

  scope.$watch(function(){
        return ctrl.model.$error;
      },function(n,o){
        console.log(n);
      });
  

для изменений ошибок, поскольку они не определены в области видимости. Смотрите это http://jsbin.com/duxewigi/3/edit