AngularJS: Cannot access form field errors from a directive -

AngularJS: Cannot access form field errors from a directive -

live demo

i utilize angular 1.2.18 (have back upwards ie8), , i'm trying create similar ngmessages exists in 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() { homecoming { scope: { model: '=formerrorsfor' }, controller: function($scope) { this.model = $scope.model; } }; }) .directive("formerror", function() { homecoming { require: '^formerrorsfor', link: function(scope, element, attrs, ctrl) { console.log(ctrl.model.$error); // {}. why?? } }; });

unfortunately, accessing form.phone.$error formerror directive, results in empty object. why doesn't have required , minlength properties?

playground here

i tried jsbin. issue here trying access errors early. scope on 2 directives different.

i changed jsbin , seems work. added watch

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

for error changes s not defined on scope. see http://jsbin.com/duxewigi/3/edit

angularjs angularjs-directive