Javascript 为什么AngularJS中的复选框的模型值错误？

我遇到了一个非常奇怪的错误。我的视图中有一个复选框，该复选框有一个指令，用于在其更改时显示其值。在FF中，它可以很好地显示正确的值。但在其他浏览器中，如Chrome，它显示相反的响应，即，如果选中，则应显示“true”，但显示“false”

我认为：

<input type="checkbox" id="accept" name="accept" ng-model="accept" d6 />

---

这样做的方法是使用

$watch

：

var myApp = angular.module('myApp',[]);

myApp.directive('d6', function(){
   return {
      require: 'ngModel',
      restrict: 'A',
      link:  function link(scope, elem, attrs, ngModel) {               
          scope.$watch(
              function () {
                  return ngModel.$modelValue;
              }, function(newValue) {
                  console.log(newValue);
              }
          );

      }
   }
});

---

有工作。

这样做的方法是使用

$watch

：

var myApp = angular.module('myApp',[]);

myApp.directive('d6', function(){
   return {
      require: 'ngModel',
      restrict: 'A',
      link:  function link(scope, elem, attrs, ngModel) {               
          scope.$watch(
              function () {
                  return ngModel.$modelValue;
              }, function(newValue) {
                  console.log(newValue);
              }
          );

      }
   }
});

---

有工作。

角度代码

在

复选框inputType

函数中的角度代码中找到，该函数用于使用

ngModelController

的所有输入[type=checkbox]：

element.on('click', function() {
    scope.$apply(function() {
        ctrl.$setViewValue(element[0].checked);
    });
});

此代码使用布尔值作为视图值更新

ngModelController

，并立即通过管道传输到提供的解析器中，从而设置模型值

单击并更改事件

您正在收听

change

事件，该事件在Chrome中的

单击事件之前触发，在firefox中则相反。这就是问题的症结所在

解决方案

jQuery的解决方案是监听
click
事件

角度解决方案是直接观察模型值。
角度代码

在
复选框inputType
函数中的角度代码中找到，该函数用于使用
ngModelController
的所有输入[type=checkbox]：

element.on('click', function() {
    scope.$apply(function() {
        ctrl.$setViewValue(element[0].checked);
    });
});

此代码使用布尔值作为视图值更新
ngModelController
，并立即通过管道传输到提供的解析器中，从而设置模型值

单击并更改事件

您正在收听
change
事件，该事件在Chrome中的
单击事件之前触发，在firefox中则相反。这就是问题的症结所在

解决方案

jQuery的解决方案是监听
click
事件

角度解决方案是直接观察模型值。
或者两个答案所说的，或者您可以简单地观察$scope.accept（这是您的模型）中的变化：

请看这里：。这种方式对我来说似乎是最自然的。
或者这两个答案所说的，或者您可以简单地观察$scope.accept（这是您的模型）中的更改：

请看这里：。这种方式对我来说似乎是最自然的。
你能提供一个JS Fiddle或更多的代码，这样我们就不必从头重写所有内容了。这里是：你能提供一个JS Fiddle或更多的代码，这样我们就不必从头重写所有内容了。这里是：这种方法的唯一缺点是，只有当范围变量名为
接受
@PrimosK这是真的+1这种方法的唯一缺点是，只有当作用域变量名为
accept
@PrimosK时，指令才可用。这是真的+1.