如果由javascript设置,则更改事件不会触发复选框

nir*_*mal 5 javascript angularjs

我创建了一个复选框的指令,它创建了一个图像层,但问题是,即使输入框检查值被更改,它也不会触发更改事件

指示

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);
                        });
                    }
                });

            });
        }
    };
}
Run Code Online (Sandbox Code Playgroud)

HTML低于

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

任何想法如何我甚至点击事件触发更改事件将是好的.

nir*_*mal 2

我所做的是在属性中传递函数值

<input type="checkbox" class="i-checks" data-icheck data-function="selectAll" ng-model="chekal" id="chkSelectAll">
Run Code Online (Sandbox Code Playgroud)

指示

                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);

                    });
                }
Run Code Online (Sandbox Code Playgroud)

所以我用 eval 来调用这个函数。这个答案仅供参考,也可以帮助其他人。

我不想添加临时的手表,所以在不增加手表的情况下就这样做了,并以更多的性能方式解决了问题。