0

我正在尝试使用指令使用 iCheck 复选框。我的指令是这样设置的。

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

我的复选框在 ng-repeat 中。我想将当前对象发送给函数以进一步处理它。我的html是这样设置的。

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

每次我更改任何复选框时都会触发 modelChanged。但我正在尝试访问 modelChanged 函数中的项目以进一步处理它。请指导。

4

1 回答 1

1

您可以传递itemto 指令范围并在link函数内部访问它。item您还可以将 onChangeEvent 处理程序传递给指令。试试这个。

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>
于 2015-06-03T15:11:13.307 回答