将验证消息转换为指令-AngularJS
[英]Validation messages into Directive - AngularJS
问题描述
I'm trying do a small reusable component in AngularJS using directives. 
我正在尝试使用指令在AngularJS中做一个小的可重用组件。 I have made good progress but I have a problem with the validations. 我已经取得了良好的进展，但是我在验证方面遇到了问题。 For example the required validation not working. 例如，所需的验证不起作用。 I think is "binding" issue. 我认为是“有约束力”的问题。
My HTML code: also in http://jsfiddle.net/pQwht/17/ 我的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>
My directive script: 我的指令脚本：
angular.module('myApp').directive('tdfield', function() {
return {
restrict: 'A',
replace:false,
transclude: false,
scope: { labelname: '@', fieldname: '@', title: '@'},
templateUrl:'element.html'
};
});
My element.html code: 我的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>
2 个解决方案
解决方案1
2 已采纳 2013-04-27 08:57:13
Well, I solved this, but for what a price. 好吧，我解决了这个问题，但是要花多少钱。 There is a number of issues and angular related among them. 其中有许多问题和角度相关。 I may not recall all, so here is the working example https://github.com/yaroslav-ulanovych/soq16245177 . 我可能还不记得全部，所以这里是工作示例https://github.com/yaroslav-ulanovych/soq16245177 。
When you define scope parameter like scope: { labelname: '@', fieldname: '@', title: '@'}, (with an object as a value), that creates an isolated scope, which means not inherited from parent one's. 当您定义scope参数，例如scope: { labelname: '@', fieldname: '@', title: '@'}, （使用对象作为值）时，将创建一个隔离的范围，这意味着不继承自父对象的。 Therefore here ng-show="paymentCallForm.{{fieldname}}.$error.required" is no access to the form. 因此，此处ng-show="paymentCallForm.{{fieldname}}.$error.required"无法访问该表单。 As a workaround ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required" , but I didn't check whether your inputs are published in the form in case of the isolated scope. 解决方法ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required" ，但是在隔离范围的情况下，我没有检查您的输入是否以表格形式发布。 Or scope: true and inject attributes into the scope manually. 或scope: true并将属性手动注入到范围中。
compile: function() {
return {
pre: function (scope, element, attr) {
scope.fieldname = attr.fieldname;
}
}
}
Note on using prelink function, so that it's called before children are linked. 请注意使用预链接功能，以便在子链接之前调用它。
Next ng-show will actually use not interpolated expression and there is obviously no property named {{fieldname}} in the form. 下一次ng-show实际上将不使用内插表达式，并且显然没有表单中名为{{fieldname}}属性。 That is fixed in later versions of Angular, don't know when exactly, cause I'm using master. 这在更高版本的Angular中已修复，不知道确切的时间，因为我使用的是master。
But what is not fixed is ngModelController . 但是不固定的是ngModelController 。 It gets it's name very early so publishes itself on the form under wrong one. 它很早就获得了它的名称，因此以错误的名称发布在表单上。 I had to fix that myself, good that there is only one line to do that, in file src/ng/directive/input.js . 我必须自己修复此问题，好在文件src/ng/directive/input.js只有一行可以做到这一点。
// add
modelCtrl.$name = attr.name;
// before this
formCtrl.$addControl(modelCtrl);
解决方案2
0 2013-04-26 23:54:32
I believe you need a controller attached to your view. 我相信您需要一个附加到视图的控制器。 The form object will be attached to property with the id of the form on $scope object of this controller. 表单对象将附加到此控制器的$scope对象上具有表单ID的属性。 Once you add that, I think it will start showing up. 添加后，我认为它将开始显示。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.