AngularJS:Firefox与Chrome中$valid的行为

Question

我目前正在编写一个自定义验证指令。它在Firefox上运行平稳，但后来我决定在Chrome和IE上进行测试，我想知道为什么这两种浏览器都不能运行。

添加一些调试输出后，我注意到一个奇怪的行为
在Firefox上选择和取消选择复选框时，我会得到以下输出：

 Object { $viewValue=true, $modelValue=true, $parsers=[2], mehr...}
 valid: true
 Object { $viewValue=false, $modelValue=false, $parsers=[2], mehr...}
 valid: false

另一方面，在Chrome上，我得到以下输出：

 Constructor {$viewValue: undefined, $modelValue: false, $parsers: Array[2], $formatters: Array[2], $viewChangeListeners: Array[0]…}
 valid: false
 Constructor {$viewValue: true, $modelValue: true, $parsers: Array[2], $formatters: Array[2], $viewChangeListeners: Array[0]…}
 valid: true 

$viewValue在第一次调用时未定义。然后它的行为就好像由于某种原因而被反转。
有人知道这种行为的原因以及可能的解决方案吗？

JavaScript：

angular.module("gewinnspielApp").directive("customValidity", function() {

    return {
        restrict: "A",
        scope: {
            customText: "@customValidity",
        },
        require: "?ngModel",
        link: function(scope, element, attrs, ngModel) {
            element[0].setCustomValidity(scope.customText);
            element.bind("change", function() {
                console.log(ngModel);
                console.log("valid: " + ngModel.$valid);
                element[0].setCustomValidity((ngModel.$valid ? "" : scope.customText));             
            });
        }
    }

});

超文本标记语言：

<td style="border:none; padding-right: 4px; width: 10px;">
    <input id="tnc" name="tnc" type="checkbox" data-ng-model="formData.tnc" required data-ng-class="{'ng-dirty': submitted, 'ng-pristine': !submitted}" data-custom-validity="Bitte akzeptieren Sie die Nutzungsbedingungen.">
</td>

编辑：模型更新和更改侦听器似乎有问题。当我在HTML页面中添加{{myForm.tnc.$valid}}时，该值与预期结果匹配。

Answer 1

为了扩展我的评论，我怀疑浏览器与输入初始化和模型更新存在一些差异。要抑制这种情况，请注意以下事项：

您可以将复选框绑定到$范围。tnc没有提供任何可以初始化的代码。如果您有该视图的控制器，请尝试设置$范围。tnc=假 开头。

如果出于某种原因，您不在此处使用控制器，也可以尝试在视图中添加初始化表达式，如下所示：

<input id="tnc" name="tnc" type="checkbox" data-ng-model="tnc" data-ng-init="tnc = false" [...]>

更新：好的，由于模型初始化差异现在已经不存在问题了，也许这将帮助您解决视图状态不一致的问题：ngChecked指令

将其附加到复选框输入，并计算复选框值模型变量上的表达式。