最近做的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']);
});
}
});
});
}
};
}]);