Question

LIVE DEMO

我使用Angular 1.2.18（必须支持IE8），我正在尝试创建类似于Angular 1.3中存在的ngMessages的东西：

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和minlength属性？

PLAYGROUND HERE

Answer 1

我试过你jsbin。这里的问题是你试图过早地访问错误。两个指令的范围也不同。

我改变了你jsbin，它似乎工作。我加了一块手表

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

表示未在范围上定义的错误更改。见http://jsbin.com/duxewigi/3/edit

AngularJS：无法从指令访问表单字段错误

1 个答案: