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

时间:2014-03-09 14:38:24

标签: javascript angularjs angularjs-directive

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

在我看来:

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

我的指示:

validation.directive('d6', ['$parse', function($parse){
   return {
      require: 'ngModel',
      restrict: 'A',
      link:  function link(scope, elem, attrs, control) {

         elem.on('change', function(){

             console.log(control.$modelValue);

         });

      }
 }
}]);

enter image description here

3 个答案:

答案 0 :(得分:2)

这样做的角色方法是使用$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);
              }
          );

      }
   }
});

有工作JSFiddle

答案 1 :(得分:2)

角度代码

在用于所有输入的checkboxInputType函数的角度代码中找到[type = checkbox]并带有ngModelController

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

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

点击并更改活动

您正在收听change事件,该事件在Chrome中的click事件之前触发,而在Firefox中则相反。这就是整个问题。

<强>解决方案

jQuery解决方案也是收听click事件。

Angular解决方案是直接观察模型值。

答案 2 :(得分:1)

这两个答案都说了什么,或者你可以简单地观察$ scope.accept(这是你的模型)中的变化:

$scope.$watch('accept', function(){
    $scope.value = $scope.accept; 
});

在此处查看:http://jsfiddle.net/A8Vgk/307/。这种方式对我来说似乎是最自然的。