如何在没有 JQuery 的情况下使用 AngularJs 在绑定到范围变量的隐藏字段上触发“更改”？

Question

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

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

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

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

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

如果我在文本框中输入，custom-validation 会按预期触发。

研究表明，AngularJs 会侦听在 DOM 元素上触发的 input 事件，但在更改范围变量后，控制器函数不会在绑定到范围变量的输入上触发这些事件。所以我需要手动完成。

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

EDIT = 添加验证指令的实现（实现只检查某些内容是否以“逗号”开头。

  .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

本质上，在您的链接功能中，您可以$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
            }
        });
    }