Question

我正在尝试使用指令使用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函数内的项目来进一步处理它。请指导。

Answer 1

您可以将item传递给指令范围，并在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>

如何将对象发送到复选框上的angular指令

1 个答案: