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

Question

I created one directive for checkbox which makes an image layer, but problem is that it's not firing ng change event if even input box checked value is changed

Directive

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 BELOW

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

Any idea how I can trigger ng change event on even click event will be fine.

cverb · Accepted Answer · 2015-08-05 06:26:57Z

3

Documentation of ngChange:

Evaluate the given expression when the user changes the input

If you want to watch the model, use $scope.watch

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

edited Aug 5, 2015 at 6:26

answered Aug 5, 2015 at 6:12

cverb

6436 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nirmal Over a year ago

solved 90% but now issue is that when I refresh page then that function executes first like I alerted some thing now it's firing first on page load

thwiegan Over a year ago

@cverb This shouldn't be necessary, since ng-change should fire if used correctly.

cverb Over a year ago

@thwiegan As he is saying in his title, the event doesn't fire when it's set via javascript, which is just normal behaviour (see the Angular documentation). @nirmal Put if (newvalue !== oldvalue) check in your watch function.

nirmal Over a year ago

@thwiegan ng change event is not firing don't know reason may be as I am changing through directive. But now thing is that it triggers event on page load first time

nirmal Over a year ago

@livepo it worked but I have used mine solution, that's why I have not accepted the answer not even mine but upvote for sure thanks cverb

nirmal · Accepted Answer · 2015-08-05 09:20:45Z

2

What i did was passing funciton value in attribute

<input type="checkbox" class="i-checks" data-icheck data-function="selectAll" ng-model="chekal" id="chkSelectAll">

directive

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

                    });
                }

so I called the function with that eval thing. This answer is just for reference so it can help others as well.

I don't wanted to add adhoc of watches so did it without increasing watches and solved question with more performance way.

edited Aug 5, 2015 at 9:20

answered Aug 5, 2015 at 6:48

nirmal

2,1901 gold badge21 silver badges29 bronze badges

2 Comments

Mawg Over a year ago

If this worked, then you ought to accept it as the answer

Mawg Over a year ago

Np. It is always ok to accept your own answer if there is no other, better answer. That way, people reading the question in future know what the solution is (you probably forgot because you can't accept your own answer until two days after you post the question).

Arpit Aggarwal · Accepted Answer · 2015-08-05 06:21:03Z

Change your icheck function to directive as below:

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

                });
            }
        };
    });

And add data-i-check as an attribute to input tag instead of data-icheck.

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

it's already directive, please read the question and still not triggering change event

atinder · Accepted Answer · 2015-08-05 06:33:16Z

0

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

answered Aug 5, 2015 at 6:33

atinder

2,09014 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related