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

我目前正在处理自定义验证指令。它在Firefox上运行平稳，但后来我决定在Chrome和IE上测试它，并想知道为什么它不能在其中任何一个上运行。AngularJS：在Firefox和Chrome中有效的行为

添加一些调试输出后，我注意到一个奇怪的行为。
当选择和不选择在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 }}时，该值与预期结果相匹配。

来源

2014-10-07 AdminAffe

你是否在某处初始化'$ scope.tnc'？如果不是，它可能确实是未定义的。 – kasoban 2014-10-07 09:24:16

为了扩大我的评论，我怀疑一些浏览器与输入初始化和模型更新的区别。为了消除这种情况，请注意以下事项：

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

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

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

更新：好吧，因为该模型初始化差超出现在的问题，也许这将帮助你与视图状态不一致：the ngChecked directive

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

来源

2014-10-07 09:33:39 kasoban

我在问题中编辑了我的模型。它是用false初始化的formData的一部分。问题似乎是输入元素而非模型的$ valid表达式。 – AdminAffe 2014-10-07 10:00:08

更新了我的答案。 – kasoban 2014-10-07 10:45:44

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

回答

相关问题