HTML Binding for Labels

angular-toggle-switch.js

@@ -1,4 +1,4 @@
-angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () {
+angular.module('toggle-switch', ['ng', 'ngSanitize']).directive('toggleSwitch', function ($compile) {
   return {
     restrict: 'EA',
     replace: true,
@@ -7,21 +7,35 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () {
       disabled: '@',
       onLabel: '@',
       offLabel: '@',
-      knobLabel: '@'
+      knobLabel: '@',
+      html: '@'
     },
-    template: '<div class="switch" ng-click="toggle()" ng-class="{ \'disabled\': disabled }"><div class="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></div></div>',
+    template: '<div class="switch" ng-click="toggle()" ng-class="{ \'disabled\': disabled }">' +
+      '</div>',
     controller: function($scope) {
       $scope.toggle = function toggle() {
         if(!$scope.disabled) {
           $scope.model = !$scope.model;
         }
       };
     },
-    compile: function(element, attrs) {
+    link: function(scope, element, attrs) {
       if (!attrs.onLabel) { attrs.onLabel = 'On'; }
       if (!attrs.offLabel) { attrs.offLabel = 'Off'; }
       if (!attrs.knobLabel) { attrs.knobLabel = '\u00a0'; }
       if (!attrs.disabled) { attrs.disabled = false; }
+      if (!attrs.html) { attrs.html = false; }
+
+      var bindMethod = attrs.html ? 'ng-bind-html' : 'ng-bind';
+
+      var innerTemplate = '<div class="switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}">' +
+              '<span class="switch-left" '+bindMethod+'="onLabel"></span>' +
+              '<span class="knob" '+bindMethod+'="knobLabel"></span>' +
+              '<span class="switch-right" '+bindMethod+'="offLabel"></span>' +
+            '</div>' ;
+
+      element.html(innerTemplate);
+      $compile(element.contents())(scope);
     },
   };
 });

bower.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "angular": ">=1.0",
+    "angular-sanitize": ">=1.0",
     "angular-mocks": ">=1.0"
   },
   "ignore": [

karma.conf.js

@@ -9,6 +9,7 @@ files = [
   JASMINE_ADAPTER,
   'bower_components/angular/angular.js',
   'bower_components/angular-mocks/angular-mocks.js',
+  'bower_components/angular-sanitize/angular-sanitize.js',
   'angular-toggle-switch.js',
   'test/*.js'
 ];

test/angular-toggle-switch.spec.js

@@ -5,7 +5,8 @@ describe('Toggle Switch', function() {
   var onLabelTemplate = '<toggle-switch model="switchState" on-label="CUSTOM-ON">\n</toggle-switch>';
   var offLabelTemplate = '<toggle-switch model="switchState" off-label="CUSTOM-OFF">\n</toggle-switch>';
   var knobLabelTemplate = '<toggle-switch model="switchState" knob-label="CUSTOM">\n</toggle-switch>';
-  var htmlLabelsTemplate = '<toggle-switch model="switchState" on-label="<i class=\'icon-ok icon-white\'></i>" off-label="<i class=\'icon-remove\'></i>">\n</toggle-switch>';
+  var htmlLabelsTemplate = '<toggle-switch model="switchState" html=true on-label="<i class=\'icon-ok icon-white\'></i>" off-label="<i class=\'icon-remove\'></i>">\n</toggle-switch>';
+  var htmlLabelsFalseTemplate = '<toggle-switch model="switchState" on-label="<i class=\'icon-ok icon-white\'></i>" off-label="<i class=\'icon-remove\'></i>">\n</toggle-switch>';
   var disabledTemplate = '<toggle-switch model="switchState" disabled="isDisabled">\n</toggle-switch>';
 
   // Load up just our module
@@ -80,13 +81,19 @@ describe('Toggle Switch', function() {
   });
 
   describe('when there is a custom `on-label`', function () {
-    // @TODO: figure out how to deal with html in Angular 1.2
-    //describe('is html', function() {
-    //  it('sets the on label', function() {
-    //    var elm = compileDirective(htmlLabelsTemplate, $scope);
-    //    expect(elm.html()).toContain('<i class="icon-ok icon-white"></i>');
-    //  });
-    //});
+    describe('is html', function() {
+      it('sets the on label', function() {
+        var elm = compileDirective(htmlLabelsTemplate, $scope);
+        expect(elm.html()).toContain('<i class="icon-ok icon-white"></i>');
+      });
+    });
+
+    describe('is html, but html is off', function() {
+      it('sets the on label as encoded', function() {
+        var elm = compileDirective(htmlLabelsFalseTemplate, $scope);
+        expect(elm.html()).toContain("&lt;i class='icon-ok icon-white'&gt;");
+      });
+    });
 
     describe('is string', function() {
       it('sets the on label', function() {
@@ -97,16 +104,22 @@ describe('Toggle Switch', function() {
   });
 
   describe('when there is a custom `off-label`', function () {
-    // @TODO: figure out how to deal with html in Angular 1.2
-    //describe('is html', function() {
-    //  it('sets the on label', function() {
-    //    var elm = compileDirective(htmlLabelsTemplate, $scope);
-    //    expect(elm.html()).toContain('<i class="icon-remove"></i>');
-    //  });
-    //});
+    describe('is html', function() {
+      it('sets the off label', function() {
+        var elm = compileDirective(htmlLabelsTemplate, $scope);
+        expect(elm.html()).toContain('<i class="icon-remove"></i>');
+      });
+    });
+
+    describe('is html, but html is off', function() {
+      it('sets the off label as encoded', function() {
+        var elm = compileDirective(htmlLabelsFalseTemplate, $scope);
+        expect(elm.html()).toContain("&lt;i class='icon-remove'&gt;");
+      });
+    });
 
     describe('is string', function() {
-      it('sets the on label', function() {
+      it('sets the off label', function() {
         var elm = compileDirective(offLabelTemplate, $scope);
         expect(elm.text()).toContain('CUSTOM-OFF');
       });