验证邮件到指令 - AngularJS(Validation messages into Dire

我试图在使用指令AngularJS做一个小的可重用组件。我已经取得了良好的进展，但我与验证的一个问题。例如，需要验证无法正常工作。我认为这是“结合”的问题。

我的HTML代码：也http://jsfiddle.net/pQwht/17/

<html ng-app="myApp">
<body>
<form ng-controller="Ctrl"
  id="paymentCallForm"
  action="#"
  name="paymentCallForm">
  <table>
   <tr tdfield 
      labelname="Primary Account Number:" 
      fieldname="primaryAccountNumber"
      title="Primary title" 
      >
    </tr>  
  </table>

我的指令脚本：

 angular.module('myApp').directive('tdfield', function() {
    return {
    restrict: 'A',
    replace:false,
    transclude: false,
    scope: { labelname: '@', fieldname: '@', title: '@'},
    templateUrl:'element.html'
  };
 });

我element.html代码：

 <td id="lbl_paymentReference" class="formInputLabelWrapper">{{labelname}}</td>
 <td class="formInputTextWrapper">
   <input id="{{fieldname}}"
     name="{{fieldname}}"
     title="{{title}}" 
     class="large empty"  
     required>
<span data-ng-show="paymentCallForm.{{fieldname}}.$error.required"
    class="error">Error</span></td>

Answer 1:

好吧，我解决了这一点，但什么价格。有一些其中的相关问题和角度。我可以不记得所有的，所以这里的工作示例https://github.com/yaroslav-ulanovych/soq16245177 。

当定义scope等参数scope: { labelname: '@', fieldname: '@', title: '@'},与对象作为值），即创建一种分离的范围，这意味着不能从父一个继承的。因此这里ng-show="paymentCallForm.{{fieldname}}.$error.required"是形式的访问权限。作为一种变通方法ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required" ，但我没有检查你的输入是否发表在形式分离范围的情况。或scope: true和手动进属性为范围。

compile: function() {
    return {
        pre: function (scope, element, attr) {
            scope.fieldname = attr.fieldname;
        }
    }
}

关于使用预链接功能，让孩子们有联系之前，它被称为。

接下来ng-show将实际使用不插表情，显然没有命名的属性{{fieldname}}形式。即在固定的角度更高版本的时候，不知道到底是因为我使用的主人。

但是，什么是不固定的ngModelController 。它得到它的名字非常早，所以出版本身下错单的形式。我必须解决这个问题喽，好有只有一行要做到这一点，在文件src/ng/directive/input.js 。

// add
modelCtrl.$name = attr.name;
// before this
formCtrl.$addControl(modelCtrl);

Answer 2:

我相信你需要连接到您的视图控制器。的形式的对象将被附连到属性与在表单的id $scope该控制器的对象。一旦你补充一点，我认为这将开始显示出来。

文章来源: Validation messages into Directive - AngularJS