如何将对象发送到复选框上的角度指令答案

【问题标题】：how to send an object to angular directive on a check-box如何将对象发送到复选框上的角度指令
【发布时间】：2015-06-03 14:53:15
【问题描述】：

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

【问题讨论】：

你想在哪里访问item？
看起来没有办法在 ng-change 或 ng-click 上调用 $scope 函数，因为它是一个插件并且有自己的复杂性，所以我试图访问指令 modelChanged 函数中的项目.
您可以在 ng-change 或 ng-click 上调用 $scope 函数。
在普通复选框的情况下是这样。但由于这是一个插件（iCheck），它不会在没有指令的情况下调用 ng-change 或 ng-click。

标签： javascript angularjs angular-directive icheck

【解决方案1】：

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

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>

【讨论】：

完美。你是一颗宝石。