为什么在控制器上使用 `$watch` 时这个隐藏字段没有更新？

Question

我有这个表格：

business-validation 是一个自定义指令，其代码为：

var CREDIT_CARD_REGEX = /^\d{0,24}$/;
angular.module('directives').directive('creditCard', [
    function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                scope.$watch(attrs.creditCard, function (newValue) {
                    return ctrl.$setViewValue(ctrl.$viewValue);
                });
                return ctrl.$parsers.push(function (viewValue) {
                    var newValue;
                    newValue = ctrl.$modelValue;

                    element.validateCreditCard(function (result) {
                        if (result.card_type &&
                                result.luhn_valid &&
                                result.length_valid &&
                                CREDIT_CARD_REGEX.test(element.val())) {
                            element.attr("data-card-type", result.card_type.name);
                            ctrl.$setValidity('creditCard', true);
                            newValue = viewValue;
                        }
                        else {
                            element.removeAttr("data-card-type");
                            ctrl.$setValidity('creditCard', false);
                        }
                    }, { accept: ['visa', 'mastercard'] });

                    return newValue;
                });
            }
        };
    }]);

我需要控制器上的myForm.anInputName.$error.creditCard 的值，为此我制作了this attempts 以及类似的东西：

<input type="hidden" ng-model="IsCreditCardValid" name="IsCreditCardValid" value="myForm.anInputName.$error.creditCard" /> 

和

$scope.$watch("IsCreditCardValid", function (newValue, oldValue) {
    alert('theChangeHasBeen:' + oldValue + ' -> ' + newValue);
});

为了$watchIsCreditCardValid在控制器。

本段显示：

<p class="help-block" ng-if="smyForm.anInputName.$error.creditCard && !myForm.anInputName.$error.required">Wrong credit card number!</p>

但是隐藏的输入永远不会得到期望值，尽管使用相同的条件。为什么最后一个隐藏字段没有更新，$watch 从未触发？

编辑
如果我做

myForm.anInputName.$valid: {{myForm.anInputName.$valid}}

该值在屏幕上更新，但隐藏字段不会更改其值。

Answer 1

ngModel 仅适用于 listed input types，并且 hidden 不在其中。 input 指令的内部暗示它不会在每个可能的输入上自动工作：

var inputType = {

  ...

  'hidden': noop,
  'button': noop,
  'submit': noop,
  'reset': noop,
  'file': noop
}

这是有道理的，因为隐藏输入不需要双向绑定（在 Angular 应用程序中也不需要它们）。如果你仍然想使用它们，那么

<input type="hidden" name="IsCreditCardValid" value="{{ IsCreditCardValid }}" />