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 ``

``