将iCheck插件用angularjs的方式封装成组件

最近做的angularjs工程项目想把多选和单选框变得更美观一点，就在项目里引用了iCheck插件。
但是使用了icheck插件后，会生成一个美化过的div覆盖在原来的checkBox或者radio之上，而原来的checkBox或者radio会被隐藏。
故而，当点击多选框时，不会直接触发事件使得绑定到checkBox或者radio上的model值改变。
所以，需要重新绑定事件，使用$ngModel.$setViewValue() 方法来给model赋值。

/* * angular directive ng-icheck * * @require jquery,icheck * @example <input type="radio" ng-model="radioCheck" ng-icheck /> * <input type="checkBox" ng-model="checkBoxCheck" ng-icheck /> */

myDirective.directive('ngIcheck',['$timeout',function($timeout) {
    return {
        require: 'ngModel',link: function($scope,element,$attrs,ngModel) {
            return $timeout(function() {
                $scope.$watch($attrs['ngModel'],function (newValue) {
                    $(element).iCheck('update');
                });

                return $(element).iCheck({
                    checkBoxClass: 'icheckBox_minimal-blue',radioClass: 'iradio_minimal-blue'

                }).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($attrs['value']);
                        });
                    }
                });
            });
        }
    };
}]);