how to send an object to angular directive on a check-box

Question

i am trying to consume iCheck check box using a directive. my directive is setup like this.

    .module('app').directive('bootstrapCheck', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        compile: function (element, $attrs) {
            var icheckOptions = {
                checkboxClass: 'icheckbox_minimal',
                radioClass: 'iradio_minimal'
            };

            var modelAccessor = $parse($attrs['ngModel']);
            return function ($scope, element, $attrs, controller) {

                var modelChanged = function (event) {
                    $scope.$apply(function () {
                        modelAccessor.assign($scope, event.target.checked);
                    });
                };

                $scope.$watch(modelAccessor, function (val) {
                    var action = val ? 'check' : 'uncheck';
                    element.iCheck(icheckOptions, action).on('ifChanged', modelChanged);
                });
            };
        }
    };
}]);

my check-boxes are in ng-repeat. i want to send the current object to function to process it further. my html is setup like this.

<input type="checkbox" ng-model="item.isSelected" ng-change="onChangeEvent(item)" bootstrap-check>

modelChanged gets triggered each time i change any check-box. but i am trying to access item inside modelChanged function to process it further. please guide.

Answer 1

You can pass the item to directive scope and access it inside the link function. Along with item you can also pass the onChangeEvent handler to the directive. Try this.

JS

angular.module('app').directive('bootstrapCheck', ['$timeout', '$parse', function ($timeout, $parse) {
        return {
            scope: {
               item: '=',
               onChangeEvent: '&'
            },
            compile: function (element, $attrs) {
                var icheckOptions = {
                    checkboxClass: 'icheckbox_minimal',
                    radioClass: 'iradio_minimal'
                };

                var modelAccessor = $parse($attrs['ngModel']);
                return function ($scope, element, $attrs, controller) {

                    var modelChanged = function (event) {

 //Here $scope.item will give you the item
 //This will trigger the parent controller's onChangeEvent set in the directive markup
 $scope.onChangeEvent({ item: $scope.item });

                        $scope.$apply(function () {
                            modelAccessor.assign($scope, event.target.checked);
                        });
                    };

                    $scope.$watch(modelAccessor, function (val) {
                        var action = val ? 'check' : 'uncheck';
                        element.iCheck(icheckOptions, action).on('ifChanged', modelChanged);
                    });
                };
            }
        };
    }]);

HTML

<input type="checkbox" 
       ng-model="item.isSelected" 
       item="item" 
       on-change-event="onChangeEvent(item)" bootstrap-check>