改变事件不触发复选框，如果它是由javascript设置的

ng change event not firing on checkbox if it's set by javascript

本文关键字：javascript 设置 如果 事件 复选框 改变      更新时间：2023-09-26

我为checkbox创建了一个指令，它使图像图层，但问题是它不会触发ng change事件即使输入框的复选值改变了

指令

function icheck($timeout,$parse) {
return {
        restrict: 'A',
        link: function ($scope, element, $attrs, $watch) {
            var value = $attrs['value'],
                ngModelGetter = $parse($attrs['ngModel']);
            return $timeout(function () {
                $scope.$watch($attrs.ngModel, function (newValue) {
                    $(element).iCheck('update');
                });
                $(element).iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green'
                }).on('ifChanged', function (event) {
                    var elemType = $(element).attr('type');
                    if (elemType === 'checkbox' && $attrs.ngModel) {
                        $scope.$apply(function () {
                            console.log(event.target.checked)
                            return ngModelGetter.assign($scope, event.target.checked);
                        });
                    }
                    else if (elemType === 'radio' && $attrs.ngModel) {
                        return $scope.$apply(function () {
                            return ngModelGetter.assign($scope, value);
                        });
                    }
                });
            });
        }
    };
}

HTML下面

<input type="checkbox" class="i-checks" data-icheck ng-change="alert('changed!')" ng-model="chekal" id="chkSelectAll">

任何想法我可以触发ng更改事件甚至点击事件将是好的。

ngChange文档:

当用户改变输入

时对给定表达式求值

如果您想观看模型，请使用$scope.watch 

$scope.$watch('chekal', function(newvalue,oldvalue) {
          if (newvalue !== oldvalue){
              //write code here
          }});

我所做的是在属性

中传递函数值
<input type="checkbox" class="i-checks" data-icheck data-function="selectAll" ng-model="chekal" id="chkSelectAll">
指令

                if (elemType === 'checkbox' && $attrs.ngModel) {
                    $scope.$apply(function () {
                        console.log(event.target.checked)
                        var f = $(event.target).data('function');
                        console.log(f);
                        if (f !== "undefined" || f !== "") {
                            eval('$scope.' + f + '(event)');
                        }
                        return ngModelGetter.assign($scope, event.target.checked);
                    });
                }

我用eval来调用函数。以上答案仅供参考，对其他人也有帮助。

我不想增加额外的表，所以在不增加表的情况下就这样做了，用更性能的方式解决了问题。

将icheck函数更改为directive，如下所示:

yourapp.directive('icheck', function($timeout,$parse) {
    return {
            restrict: 'A',
            link: function ($scope, element, $attrs, $watch) {
                var value = $attrs['value'],
                    ngModelGetter = $parse($attrs['ngModel']);
                return $timeout(function () {
                    $scope.$watch($attrs.ngModel, function (newValue) {
                        $(element).iCheck('update');
                    });
                    $(element).iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green'
                    }).on('ifChanged', function (event) {
                        var elemType = $(element).attr('type');
                        if (elemType === 'checkbox' && $attrs.ngModel) {
                            $scope.$apply(function () {
                                console.log(event.target.checked)
                                return ngModelGetter.assign($scope, event.target.checked);
                            });
                        }
                        else if (elemType === 'radio' && $attrs.ngModel) {
                            return $scope.$apply(function () {
                                return ngModelGetter.assign($scope, value);
                            });
                        }
                    });
                });
            }
        };
    });

将data-icheck添加为data-i-check作为输入标签的属性。

<input type="checkbox" class="i-checks" data-i-check ng-change="alert('changed!')" ng-model="chekal" id="chkSelectAll">

$scope.$watch('chekal', function(newvalue,oldvalue) {
  if (newvalue && newvalue !== oldvalue){
      // here you go
  }
});
相关文章：