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中有效的行爲

回答

相關問題