AngularJS: поведение $, действительное в Firefox против Chrome

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> 

Edit: Похоже, проблема с обновлением модели и изменения слушателя. Когда я добавляю {{ myForm.tnc.$valid }} на странице HTML, значение соответствует ожидаемому результату.

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

Прикрепите его к своему флажковому вводу и оцените выражение в переменной модели значения флажка.