gpt4 book ai didi

javascript - 验证消息到指令 - AngularJS

转载 作者:行者123 更新时间:2023-11-30 18:04:03 25 4
gpt4 key购买 nike

我正在尝试使用指令在 AngularJS 中做一个小的可重用组件。我取得了很好的进展,但我在验证方面遇到了问题。例如,所需的验证不起作用。我认为是“绑定(bind)”问题。

我的 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>

我的指令脚本:

 angular.module('myApp').directive('tdfield', function() {
return {
restrict: 'A',
replace:false,
transclude: false,
scope: { labelname: '@', fieldname: '@', title: '@'},
templateUrl:'element.html'
};
});

我的 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>

最佳答案

好吧,我解决了这个问题,但代价太大了。其中有许多问题和 Angular 相关。我可能不记得全部了,所以这里是工作示例 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 并手动将属性注入(inject)范围。

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

关于使用 prelink 函数的注意事项,以便在链接子项之前调用它。

下一个 ng-show 将实际使用非内插表达式,并且表单中显然没有名为 {{fieldname}} 的属性。这是在更高版本的 Angular 中修复的,不知道确切的时间,因为我使用的是 master。

但不固定的是ngModelController。它很早就得到了它的名字,所以在错误的表格下发布了自己。我必须自己解决这个问题,好在文件 src/ng/directive/input.js 中只有一行可以做到这一点。

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

关于javascript - 验证消息到指令 - AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16245177/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com