如何在绑定到范围变量的隐藏字段上触发 'change' AngularJs 而没有 JQuery？

Question

我有一个构建字符串的复杂控件（按钮点击、下拉菜单等）。因此，每个按钮 click/dropdown 选择都会调用一个范围函数，该函数反过来会更新保存我的结果的范围变量。

我将此范围变量绑定到 UI 中的一个隐藏字段：

<input type="hidden" ng-model="MyComplexString" custom-validation ng-value="MyComplexString" />

但是，当控制器功能更新时 MyComplexString，custom-validation 不会被触发。

我尝试将输入类型更改为文本，确实 MyComplexString 得到了更新，但是，custom-validation 仍然没有触发。

但是，如果我在文本框中键入内容，custom-validation 会按预期触发。

研究表明 AngularJs 监听 DOM 元素上触发的 input 事件，但控制器函数在更改范围变量。所以我需要手动执行此操作。

我希望这是有道理的。任何想法将不胜感激。

EDIT = 添加验证指令的实现（实现仅检查某些内容是否以 '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;
            });
        }
    };
})

Answer 1

您可以做的是在您的指令中使用 $watch 以便它可以重复使用。查看答案here

本质上，在您的 link 函数中，您可以 $watch attrs.ngModel，它会捕捉任何变化。您的 link 函数将更改为如下所示：

link: function (scope, element, attrs) {
            scope.$watch(attrs.ngModel, function (newVal) {
                //Do custom validation here
            });
        }

查看工作 JSFiddle 我分叉 here 有两个简单的输入和一个隐藏的输入，使用将每个更改写入控制台的指令

编辑： 您可能想要检查 newVal 和 oldVal 是否相等以忽略初始化调用，它看起来像这样：

link: function (scope, element, attrs) {
        scope.$watch(attrs.ngModel, function (newVal, oldVal) {
            if(newVal !== oldVal) {
                //Do custom validation here
            }
        });
    }

如何在绑定到范围变量的隐藏字段上触发 'change' AngularJs 而没有 JQuery？

How to trigger 'change' on a hidden field bound to a scope variable with AngularJs without JQuery?

javascript

input

dom-events

angularjs