最近做的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']);
});
}
});
});
}
};
}]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。