如何触发绑定到一个范围的变量与不AngularJs JQuery的隐藏字段“变”？ [英] How to trigger 'change' on a hidden field bound to a scope variable with AngularJs without JQuery?
问题描述
我有一个复杂的控制（点击按钮，下拉菜单等）的生成的字符串。因此，每按一下按钮/下拉菜单选择调用一个函数的范围，反过来更新保存我的结果的范围的变量。
我这个范围变量的隐藏字段绑定在UI：
＆LT;输入类型=隐藏NG-模式=MyComplexString定制验证NG值=MyComplexString/＆GT;
然而，当控制器功能更新 MyComplexString ，定制验证的不会被触发。
我试图改变输入类型为文本，确实的 MyComplexString 的得到更新，然而，的自定义的验证的仍然不火。
如果我在文本框中键入然而，的 的火灾预期自定义的验证。
研究表明，AngularJs侦听DOM元素发射输入事件，但控制器功能不火不断变化的变量的作用域后势必范围变量输入的事件。所以，我需要手动执行此操作。
我希望这是有道理的。任何想法将AP preciated。
感谢您！
编辑=添加验证指令的执行（只执行一些检查是否有一个'逗号'开始。
.directive（customValidation功能（）{
返回{
限制：'A'，
要求：'ngModel'，
链接：功能（范围，ELE，ATTRS，CTRL）{
Ctrl键。$ parsers.unshift（函数（值）{
VAR有效= FALSE;
如果（值）{
//测试和更新后设置的有效性。
有效= value.charAt（0）=='';
CTRL $ setValidity（'customValFlag'，有效）。
}
返回有效？值：未定义;
}）;
}
};
}）
有些事情，你可以做的是使用 $观看您的指令中，因此是可重复使用。一看便知这里
从本质上讲，你的链接功能中可以 $观看的 attrs.ngModel ，它捕获的任何更改。你的链接函数将改变这样的：
链接：功能（范围，元素，ATTRS）{
范围。$腕表（attrs.ngModel，功能（的newval）{
//执行自定义验证这里
}）;
}
请参阅工作的jsfiddle我分叉这里两个简单的输入，并使用该写的每一个变化的指令隐藏的输入到控制台
编辑：您可能要检查的newval和OLDVAL等于忽略初始化调用，这将是这样的：
链接：功能（范围，元素，ATTRS）{
范围。$腕表（attrs.ngModel，功能（的newval，OLDVAL）{
如果（的newval！== OLDVAL）{
//执行自定义验证这里
}
}）;
}
I have a complex control (button clicks, dropdowns, etc) that builds a string. So every button click/dropdown selection calls a scope function that in turn updates a scope variable that holds my result.
I bind this scope variable to a hidden field in the UI:
<input type="hidden" ng-model="MyComplexString" custom-validation ng-value="MyComplexString" />
However, when the controller function updates MyComplexString, custom-validation isn't triggered.
I tried changing the input type to text, and indeed MyComplexString gets updated, however, custom-validation still doesn't fire.
If I type in the textbox however, custom-validation fires as expected.
Research shows that AngularJs listens for 'input' events fired on DOM elements, but the controller function doesn't fire those events on the inputs bound to scope variables after changing the scope variables. So I need to do this manually.
I hope this makes sense. Any ideas would be appreciated.
Thank you!
EDIT = Adding the implementation of the validation directive (implementation only checks whether something starts with a 'comma'.
.directive("customValidation", function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.unshift(function(value) {
var valid = false;
if (value) {
// test and set the validity after update.
valid = value.charAt(0) == ',';
ctrl.$setValidity('customValFlag', valid);
}
return valid ? value : undefined;
});
}
};
})
Something you can do is to use a $watch within your directive so it is reusable. See the answer here
Essentially, within your link function you can $watch the attrs.ngModel, which catches any changes. Your link function would change to something like this:
link: function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (newVal) {
//Do custom validation here
});
}
See working JSFiddle I forked here with two simple inputs and a hidden input using the directive that writes every change to the console
Edit: You might want to check for newVal and oldVal being equal to ignore the initialization call, which would look like this:
link: function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (newVal, oldVal) {
if(newVal !== oldVal) {
//Do custom validation here
}
});
}
这篇关于如何触发绑定到一个范围的变量与不AngularJs JQuery的隐藏字段“变”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
