问题描述
限时送ChatGPT账号..我正在尝试使用指令在 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/pQwht/17/
My HTML code: also in http://jsfiddle/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/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/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屋!
更多推荐
[db:关键词]
发布评论