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');
});