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

});

HTML：

<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

为了扩展我的评论，我怀疑浏览器与输入初始化和模型更新有所不同。为了抑制这种情况，请注意以下事项：

您将复选框绑定到$scope.tnc，但没有提供可能初始化的代码。如果您有该视图的控制器，请尝试在开头设置$scope.tnc = false;。

如果由于某种原因你不在这里使用控制器，你也可以尝试在视图中添加一个初始化表达式，如下所示：

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

更新：好的，既然模型初始化差异现在已经不再存在，这可能会帮助您解决视图状态不一致问题：the ngChecked directive

将其附加到您的复选框输入并评估复选框值模型变量上的表达式。

AngularJS：在Firefox与Chrome中有效的行为

1 个答案: