验证邮件到指令 - AngularJS [英] Validation messages into Directive - AngularJS
问题描述
我试图用指令AngularJS做一个小的可重用组件。
我已经取得了良好进展，但我与验证的一个问题。例如，需要验证不工作。我认为是绑定的问题。
我的HTML code：也是在 http://jsfiddle.net/pQwht/17/
＆LT; HTML NG-应用=对myApp＆GT;
＆LT;身体GT;
＆LT;形式NG控制器=CTRL
ID =paymentCallForm
行动=＃
NAME =paymentCallForm＆GT;
＆LT;表＆gt;
＆所述; TR tdfield
标签=主帐号
字段名=primaryAccountNumber
标题=初级职称
＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
我的指令脚本：
angular.module（'对myApp'）。指令（tdfield'，函数（）{
返回{
限制：'A'，
更换：假的，
transclude：假的，
适用范围：{标签：'@'，字段名：'@'，标题：@}，
templateUrl：element.html
};
}）;
我element.html code：
＆LT; TD ID =lbl_paymentReference级=formInputLabelWrapper＆GT; {{标签}}＆LT; / TD＆GT;
＆LT; TD类=formInputTextWrapper＆GT;
＆LT;输入ID ={{字段名}}
NAME ={{字段名}}
标题={{title}}的
类=大空
需要＆GT;
＆LT;跨度数据-NG-秀=。paymentCallForm {{字段名}} $ error.required
类=错误＆GT;错误＆LT; / SPAN＆GT;＆LT; / TD＆GT;
好吧，我解决了这一点，但什么价格。有若干其中相关的问题和角度。我可能不会记得所有的，所以这里是工作的例子 https://github.com/yaroslav-ulanovych/soq16245177 。
当你定义范围参数如范围：{标签：'@'，字段名：'@'，标题：@}， （以一个对象作为值），创建一个孤立的范围，这意味着不是从父一个人的继承。因此，在这里 NG-秀=paymentCallForm。{{字段名}}。$ error.required是形式的访问权限。作为一种变通方法 NG-秀=$ parent.paymentCallForm。{{字段名}}。$ error.required，但我没有检查你的输入是刊登在在分离的范围的情况下的形式。或范围：真正的，并注入到属性手动范围
编译：功能（）{
返回{
pre：功能（范围，元素，属性）{
scope.fieldname = attr.fieldname;
}
}
}
请注意使用$ P $砰砰的功能，让孩子们有联系之前，它被称为
下一页 NG-节目将实际使用不插前pression显然没有命名属性 {{字段名}} 的形式。这是固定在角更高版本，不知道什么时候完全是，因为我使用的主人。
但是，什么是不固定的是 ngModelController 。它得到它的名字非常早，所以公布自己受到错误的表格上。我必须解决这个问题喽，好事，只有一条线做的是，在文件的src /纳克/指令/ input.js 。
//添加
。modelCtrl $名= attr.name;
// 在这之前
formCtrl $的AddControl（modelCtrl）。
I'm trying do a small reusable component in AngularJS using directives. 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 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:
<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>
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.
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. Therefore here ng-show="paymentCallForm.{{fieldname}}.$error.required" is no access to the form. 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. Or scope: true and inject attributes into the scope manually.
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. That is fixed in later versions of Angular, don't know when exactly, cause I'm using master.
But what is not fixed is 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.
// add
modelCtrl.$name = attr.name;
// before this
formCtrl.$addControl(modelCtrl);
这篇关于验证邮件到指令 - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
