Proposal for styling right and left span

[manu-l]

Hello,

First, thanks for this module.

I need to specify a class for each "side/span" of the element. Actually, you can only specify the background color of the "On" element and I want to specify a background color for the "Off" element, so I introduced on-class and off-class tags. Here are the changes I made.
Perhaps it will help someone.

In angular-toggle-switch.js

``
angular.module('toggle-switch', ['ng']).directive('toggleSwitch', ['$compile', function($compile) {

return {
	restrict: 'EA',
	replace: true,
	require:'ngModel',
	scope: {
		isDisabled: '=',
		onLabel: '@',
		offLabel: '@',
		knobLabel: '@',
		html: '=',
		onChange: '&',
		onClass: '@',
		offClass: '@'
	},
	template:
				'<div class="ats-switch" ng-click="toggle()" ng-keypress="onKeyPress($event)" ng-class="{ \'disabled\': isDisabled }" role="switch" aria-checked="{{!!model}}">' +
					'<div class="switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
						'<span class="switch-left"></span>' +
						'<span class="knob"></span>' +
						'<span class="switch-right"></span>' +
					'</div>' +
				'</div>',
	compile: function(element, attrs) {
		if (angular.isUndefined(attrs.onLabel)) {
			attrs.onLabel = 'On';
		}
		if (angular.isUndefined(attrs.onClass)) {
			attrs.onClass = '';
		}
		if (angular.isUndefined(attrs.offLabel)) {
			attrs.offLabel = 'Off';
		}
		if (angular.isUndefined(attrs.offClass)) {
			attrs.offClass = '';
		}
		if (angular.isUndefined(attrs.knobLabel)) {
			attrs.knobLabel = '\u00a0';
		}
		if (angular.isUndefined(attrs.isDisabled)) {
			attrs.isDisabled = false;
		}
		if (angular.isUndefined(attrs.html)) {
			attrs.html = false;
		}
		if (angular.isUndefined(attrs.tabindex)) {
			attrs.tabindex = 0;
		}
		return function postLink(scope, iElement, iAttrs, ngModel) {
			iElement.attr('tabindex', attrs.tabindex);

			scope.toggle = function toggle() {
				if (!scope.isDisabled) {
					scope.model = !scope.model;
					ngModel.$setViewValue(scope.model);
					scope.onChange();
				}					
			};

			var spaceCharCode = 32;
			scope.onKeyPress = function onKeyPress($event) {
				if ($event.charCode == spaceCharCode && !$event.altKey && !$event.ctrlKey && !$event.metaKey) {
					scope.toggle();
					$event.preventDefault();
				}
			};

			ngModel.$formatters.push(function(modelValue) {
				return modelValue;
			});

			ngModel.$parsers.push(function(viewValue) {
				return viewValue;
			});

			ngModel.$viewChangeListeners.push(function() {
				scope.$eval(attrs.ngChange);
			});

			ngModel.$render = function() {
				scope.model = ngModel.$viewValue;
			};

			var bindSpan = function(span, html) {
				span = angular.element(span);
				var bindAttributeName = (html === true) ? 'ng-bind-html' : 'ng-bind';

				// remove old ng-bind attributes
				span.removeAttr('ng-bind-html');
				span.removeAttr('ng-bind');

				if (angular.element(span).hasClass("switch-left")) {
					span.attr(bindAttributeName, 'onLabel');
					span.attr('ng-class', 'onClass');
				}
				if (span.hasClass("knob"))
					span.attr(bindAttributeName, 'knobLabel');
				if (span.hasClass("switch-right")){
					span.attr(bindAttributeName, 'offLabel');
					span.attr('ng-class', 'offClass');
				}
				$compile(span)(scope, function(cloned, scope) {
					span.replaceWith(cloned);
				});
			};

			// add ng-bind attribute to each span element.
			// NOTE: you need angular-sanitize to use ng-bind-html
			var bindSwitch = function(iElement, html) {
				angular.forEach(iElement[0].children[0].children, function(span, index) {
					bindSpan(span, html);
				});
			};

			scope.$watch('html', function(newValue) {
				bindSwitch(iElement, newValue);
			});
		};
	}
};

}]);
``

I add the following line in the CSS (to be customized)
.ats-switch span.btn-primary { background-color: #286090; border-color: #204d74; } .ats-switch span.btn-success { background-color: #5cb85c; border-color: #4cae4c; } .ats-switch span.btn-info { background-color: #5bc0de; border-color: #46b8da; } .ats-switch span.btn-warning { background-color: #f0ad4e; border-color: #eea236; } .ats-switch span.btn-danger { background-color: #d9534f; border-color: #d43f3a; }

And this is how I use it
<toggle-switch ng-model="user.is_active" on-label="Active" on-class="btn-success" off-label="Inactive" off-class="btn-danger"> </toggle-switch>