using angularjs directive for icheck plugin

Question

I've a problem with my Angularjs app, cannot figure out where is the problem.

check it on plunker Here

when I click the button it should run the iCheck() plugin, but it doesn't

Answer 1

You should do one thing in order to get everything working: force AngularJS to actually use jQuery.

AngularJS includes jQlite in its source code, but it's not the same as jQuery. If you include jQuery before angular.js then Angular will use it instead of own implementation.

Thus just change this in index.html:

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>

(jQuery is before angular.js)

working Plunker

Answer 2

A better iCheck directive can be found here: https://github.com/fronteed/iCheck/issues/62 (wajatimur)

return {
    require: 'ngModel',
    link: function($scope, element, $attrs, ngModel) {
        return $timeout(function() {
            var value;
            value = $attrs['value'];

            $scope.$watch($attrs['ngModel'], function(newValue){
                $(element).iCheck('update');
            })

            return $(element).iCheck({
                checkboxClass: 'icheckbox_flat-aero',
                radioClass: 'iradio_flat-aero'

            }).on('ifChanged', function(event) {
                if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                    $scope.$apply(function() {
                        return ngModel.$setViewValue(event.target.checked);
                    });
                }
                if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                    return $scope.$apply(function() {
                        return ngModel.$setViewValue(value);
                    });
                }
            });
        });
    }
};