Namespace styles

angular-toggle-switch.css

@@ -1,4 +1,4 @@
-.switch {
+.toggle-switch {
     border: 1px solid;
     cursor: pointer;
     display: inline-block;
@@ -8,11 +8,11 @@
     min-width: 100px;
 }
 
-.switch.disabled > div > span.knob {
+.toggle-switch.disabled > div > span.knob {
     background: #AAA;
 }
 
-.switch span {
+.toggle-switch span {
     cursor: pointer;
     display: inline-block;
     float: left;
@@ -29,12 +29,12 @@
     -webkit-box-sizing: border-box;
 }
 
-.switch > div {
+.toggle-switch > div {
     position: relative;
     width: 150%;
 }
 
-.switch .knob {
+.toggle-switch .knob {
     background: red;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
@@ -43,29 +43,29 @@
     z-index: 100;
 }
 
-.switch .switch-on {
+.toggle-switch .switch-on {
     left: 0%;
 }
 
-.switch .switch-off {
+.toggle-switch .switch-off {
     left: -50%
 }
 
-.switch .switch-left, .switch .switch-right {
+.toggle-switch .switch-left, .toggle-switch .switch-right {
     z-index: 1;
 }
 
-.switch .switch-left {
+.toggle-switch .switch-left {
     color: #fff;
     background: #005fcc;
 }
 
-.switch .switch-right {
+.toggle-switch .switch-right {
     color: #333;
     background: #f0f0f0;
 }
 
-.switch-animate {
+.toggle-switch-animate {
     transition: left 0.5s;
     -o-transition: left 0.5s;
     -moz-transition: left 0.5s;

angular-toggle-switch.js

@@ -9,8 +9,8 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () {
       offLabel: '@',
       knobLabel: '@'
     },
-    template: '<div role="radio" class="switch" ng-class="{ \'disabled\': disabled }">' +
-        '<div class="switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
+    template: '<div role="radio" class="toggle-switch" ng-class="{ \'disabled\': disabled }">' +
+        '<div class="toggle-switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
         '<span class="switch-left" ng-bind="onLabel"></span>' +
         '<span class="knob" ng-bind="knobLabel"></span>' +
         '<span class="switch-right" ng-bind="offLabel"></span>' +
@@ -21,6 +21,7 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () {
       if (!attrs.offLabel) { attrs.offLabel = 'Off'; }
       if (!attrs.knobLabel) { attrs.knobLabel = '\u00a0'; }
       if (!attrs.disabled) { attrs.disabled = false; }
+
       element.on('click', function() {
         scope.$apply(scope.toggle);
       });
@@ -36,6 +37,7 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () {
       ngModelCtrl.$render = function(){
           scope.model = ngModelCtrl.$viewValue;
       };
+
       scope.toggle = function toggle() {
         if(!scope.disabled) {
           scope.model = !scope.model;