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);
});

为了控制器的$watch IsCreditCardValid。

显示本段：

<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，并且隐藏在其中。 input指令的内部提示它不会在每个可能的输入上自动运行：

var inputType = {

  ...

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

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

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

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

1 个答案: