Javascript 将验证消息转换为指令-AngularJS

我正在尝试使用指令在AngularJS中创建一个小的可重用组件。 我取得了很好的进展，但我在验证方面有问题。例如，所需的验证不起作用。我认为这是“有约束力”的问题

我的HTML代码：也在

My 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>

{{labelname}
错误

我认为您需要在视图上附加一个控制器。表单对象将附加到此控制器的

$scope

对象上具有表单id的属性。一旦你加上它，我想它会开始出现。

好吧，我解决了这个问题，但代价太高了。其中有许多问题和相关的问题。我可能不记得所有的，所以这里是一个工作的例子

当您定义

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;
        }
    }
}

请注意使用prelink函数，以便在链接子项之前调用它

下一步

ng show

将实际使用not插值表达式，并且表单中显然没有名为

{{fieldname}}

的属性。这在Angular的后续版本中得到了修复，不知道确切的时间，因为我使用的是master

但不固定的是

ngModelController

。它很早就得到了它的名字，所以在错误的表单下发布了它自己。我必须自己解决这个问题，很好，只有一行可以解决这个问题，在文件

src/ng/directive/input.js

中

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

---

你的谢克坦，是个打字错误。在jsfiddle中是正确的。Yaroslav，为了在element.html中使用angular 1.1.1，我使用了ErrorThat，因为input和span使用相同的字段名，即

{{fieldname}

，而不是

primaryAccountNumber

。如果在表中添加第二行，您会看到它的输入被忽略，并且第一个输入控制两个跨度。

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

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