diff --git a/angular-toggle-switch.js b/angular-toggle-switch.js index e8041e3..7e9d00c 100644 --- a/angular-toggle-switch.js +++ b/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,9 +7,11 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () { disabled: '@', onLabel: '@', offLabel: '@', - knobLabel: '@' + knobLabel: '@', + html: '@' }, - template: '
', + template: '
' + + '
', controller: function($scope) { $scope.toggle = function toggle() { if(!$scope.disabled) { @@ -17,11 +19,23 @@ angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function () { } }; }, - 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 = '
' + + '' + + '' + + '' + + '
' ; + + element.html(innerTemplate); + $compile(element.contents())(scope); }, }; }); diff --git a/angular-toggle-switch.min.js b/angular-toggle-switch.min.js index 108c272..ef25007 100644 --- a/angular-toggle-switch.min.js +++ b/angular-toggle-switch.min.js @@ -1 +1 @@ -angular.module("toggle-switch",["ng"]).directive("toggleSwitch",function(){return{restrict:"EA",replace:!0,scope:{model:"=",disabled:"@",onLabel:"@",offLabel:"@",knobLabel:"@"},template:'
',controller:["$scope",function($scope){$scope.toggle=function(){$scope.disabled||($scope.model=!$scope.model)}}],compile:function(element,attrs){attrs.onLabel||(attrs.onLabel="On"),attrs.offLabel||(attrs.offLabel="Off"),attrs.knobLabel||(attrs.knobLabel=" "),attrs.disabled||(attrs.disabled=!1)}}}); \ No newline at end of file +angular.module("toggle-switch",["ng","ngSanitize"]).directive("toggleSwitch",["$compile",function($compile){return{restrict:"EA",replace:!0,scope:{model:"=",disabled:"@",onLabel:"@",offLabel:"@",knobLabel:"@",html:"@"},template:'
',controller:["$scope",function($scope){$scope.toggle=function(){$scope.disabled||($scope.model=!$scope.model)}}],link:function(scope,element,attrs){attrs.onLabel||(attrs.onLabel="On"),attrs.offLabel||(attrs.offLabel="Off"),attrs.knobLabel||(attrs.knobLabel=" "),attrs.disabled||(attrs.disabled=!1),attrs.html||(attrs.html=!1);var bindMethod=attrs.html?"ng-bind-html":"ng-bind",innerTemplate='
';element.html(innerTemplate),$compile(element.contents())(scope)}}}]); \ No newline at end of file diff --git a/bower.json b/bower.json index c1646ef..60a61df 100644 --- a/bower.json +++ b/bower.json @@ -12,6 +12,7 @@ }, "devDependencies": { "angular": ">=1.0", + "angular-sanitize": ">=1.0", "angular-mocks": ">=1.0" }, "ignore": [ diff --git a/karma.conf.js b/karma.conf.js index 6a8c68b..1405c37 100644 --- a/karma.conf.js +++ b/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' ]; diff --git a/test/angular-toggle-switch.spec.js b/test/angular-toggle-switch.spec.js index 04888db..11a6cab 100644 --- a/test/angular-toggle-switch.spec.js +++ b/test/angular-toggle-switch.spec.js @@ -5,7 +5,8 @@ describe('Toggle Switch', function() { var onLabelTemplate = '\n'; var offLabelTemplate = '\n'; var knobLabelTemplate = '\n'; - var htmlLabelsTemplate = '\n'; + var htmlLabelsTemplate = '\n'; + var htmlLabelsFalseTemplate = '\n'; var disabledTemplate = '\n'; // 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(''); - // }); - //}); + describe('is html', function() { + it('sets the on label', function() { + var elm = compileDirective(htmlLabelsTemplate, $scope); + expect(elm.html()).toContain(''); + }); + }); + + 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("<i class='icon-ok icon-white'>"); + }); + }); 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(''); - // }); - //}); + describe('is html', function() { + it('sets the off label', function() { + var elm = compileDirective(htmlLabelsTemplate, $scope); + expect(elm.html()).toContain(''); + }); + }); + + 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("<i class='icon-remove'>"); + }); + }); 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'); });