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

前端之家收集整理的这篇文章主要介绍了将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']);
                        });
                    }
                });
            });
        }
    };
}]);
原文链接:https://www.f2er.com/angularjs/145340.html

猜你在找的Angularjs相关文章