fix(toggle): fix toggle-class attribute

Closes #1851

Author: adamdbradley

demos/directive/toggle/simple/index.html

@@ -0,0 +1,25 @@
+---
+name: simple
+component: ionToggle
+---
+
+<ion-header-bar class="bar-positive">
+  <h1 class="title">
+    Toggle: Simple Usage
+  </h1>
+</ion-header-bar>
+<ion-content ng-controller="MainCtrl" class="padding">
+  <h4>Your pizza has {{toppings()}}!</h4>
+  <ion-toggle ng-model="pizza.pepperoni">
+    Pepperoni?
+  </ion-toggle>
+  <ion-toggle ng-model="pizza.sausage" toggle-class="toggle-energized">
+    Sausage?
+  </ion-toggle>
+  <ion-toggle ng-model="pizza.jalapenos" toggle-class="toggle-calm">
+    Jalapeno?
+  </ion-toggle>
+  <ion-toggle ng-model="pizza.anchovies" toggle-class="toggle-royal">
+    Anchovies?
+  </ion-toggle>
+</ion-content>

demos/directive/toggle/simple/index.js

@@ -0,0 +1,30 @@
+---
+name: simple
+component: ionToggle
+---
+
+var app = angular.module('simple', ['ionic']);
+app.controller('MainCtrl', function($scope) {
+  $scope.pizza = {
+    pepperoni: true,
+    sausage: false,
+    anchovies: true,
+    jalapenos: false
+  };
+
+  $scope.toppings = function() {
+    var toppings = Object.keys($scope.pizza).filter(function(flavor) {
+      return $scope.pizza[flavor];
+    });
+    if (toppings.length > 1) {
+      toppings[toppings.length - 1] = 'and ' + toppings[toppings.length - 1];
+    }
+    if (toppings.length > 2) {
+      return toppings.join(', ');
+    } else if (toppings.length) {
+      return toppings.join(' ');
+    } else {
+      return 'nothing';
+    }
+  };
+});

demos/directive/toggle/simple/test.scenario.js

@@ -0,0 +1,16 @@
+---
+name: simple
+component: ionToggle
+---
+
+it('should uncheck 1st and check 2nd checkbox by clicking its label', function(){
+  var ele = element.all(by.css('label.toggle'));
+  ele.get(0).click();
+  ele.get(1).click();
+});
+
+it('should check 1st and uncheck 2nd checkbox by clicking its label', function(){
+  var ele = element.all(by.css('label.toggle'));
+  ele.get(0).click();
+  ele.get(1).click();
+});

js/angular/directive/toggle.js

@@ -61,6 +61,10 @@ function($ionicGesture, $timeout) {
         }
       });
 
+      if(attr.toggleClass) {
+        element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
+      }
+
       return function($scope, $element, $attr) {
          var el, checkbox, track, handle;
 

test/unit/angular/directive/toggle.unit.js

@@ -69,4 +69,15 @@ describe('Ionic Toggle', function() {
 
   });
 
+  it('Should have toggle class', function() {
+
+    // Init with not disabled
+    rootScope.data = { isDisabled: false };
+    el = compile('<ion-toggle toggle-class="toggle-dark" ng-model="data.name" ng-disabled="data.isDisabled"></ion-toggle>')(rootScope);
+
+    // Grab fields
+    var label = el.find('label');
+    expect(label.hasClass('toggle-dark')).toEqual(true);
+  });
+
 });