验证消息到指令 - AngularJS [英] Validation messages into Directive - AngularJS
问题描述
我正在尝试使用指令在 AngularJS 中做一个小的可重用组件.我取得了很好的进展，但我在验证方面遇到了问题.例如，所需的验证不起作用.我认为是绑定"问题.
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.
我的 HTML 代码:也在 http://jsfiddle.net/pQwht/17/
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>
我的指令脚本:
angular.module('myApp').directive('tdfield', function() {
return {
restrict: 'A',
replace:false,
transclude: false,
scope: { labelname: '@', fieldname: '@', title: '@'},
templateUrl:'element.html'
};
});
我的 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>
推荐答案
好吧，我解决了这个问题，但代价是巨大的.其中有许多问题和角度相关.我可能不记得所有，所以这里是工作示例 https://github.com/yaroslav-ulanovych/soq16245177.
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.
当您定义 scope 参数时，如 scope: { labelname: '@', fieldname: '@', title: '@'},(对象为一个值)，它创建了一个隔离的范围，这意味着不是从父级继承的.因此这里 ng-show="paymentCallForm.{{fieldname}}.$error.required" 是无法访问表单的.作为一种解决方法 ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required"，但我没有检查您的输入是否在表单中发布，以防万一孤立的范围.或者 scope: true 并手动将属性注入范围.
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;
}
}
}
注意使用 prelink 函数，以便在链接孩子之前调用它.
Note on using prelink function, so that it's called before children are linked.
接下来ng-show实际上将使用非插值表达式，并且表单中显然没有名为{{fieldname}}的属性.这在 Angular 的后续版本中已修复，不知道确切时间，因为我正在使用 master.
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.
但没有固定的是ngModelController.它很早就有了它的名字，所以在错误的表格上发布了自己.我必须自己解决这个问题，好在只有一行代码可以做到这一点，在文件 src/ng/directive/input.js 中.
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屋！
