Skip to content

Instantly share code, notes, and snippets.

@rkalkani
Created February 21, 2016 09:55
Show Gist options
  • Save rkalkani/dedffe7062f526fe7917 to your computer and use it in GitHub Desktop.
Save rkalkani/dedffe7062f526fe7917 to your computer and use it in GitHub Desktop.
AngularJS directive for iCheck jquery plugin
/**
* @Company: winrtech
* @Author: rahul
*/
'use strict';
// Directive : icheck
// attributes
// data-label : To set element label or text
// data-checkbox : set checkbox class for iCheck
// data-radio : set radio class for iCheck
(function() {
var icheck = function($timeout, $parse) {
return {
require: 'ngModel',
link: function($scope, element, $attrs, ngModel) {
return $timeout(function() {
var value = $attrs['value'];
var defaultCheckboxClass = 'icheckbox';
var defaultRadioClass = 'iradio';
var options = {
checkboxClass: $attrs['checkbox'] ? $attrs['checkbox'] : defaultCheckboxClass,
radioClass: $attrs['radio'] ? $attrs['radio'] : defaultRadioClass,
insert: $attrs['label'] ? $attrs['label'] : ''
};
$scope.$watch($attrs['ngModel'], function(newValue) {
$(element).iCheck('update');
})
return $(element).iCheck(options).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(value);
});
}
});
});
}
};
};
angular.module('w_icheck', [])
.directive('icheck', icheck);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment