Skip to content

Commit a01bd20

Browse files
JumpLinkJumpLink
committed
merged
1 parent a3b85e5 commit a01bd20

10 files changed

Lines changed: 159 additions & 138 deletions

‎angular-toggle-switch.js‎

Lines changed: 68 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,76 @@
1-
angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function ($compile) {
2-
return {
3-
restrict: 'EA',
4-
replace: true,
5-
scope: {
6-
model: '=',
7-
disabled: '@',
8-
onLabel: '@',
9-
offLabel: '@',
10-
knobLabel: '@',
11-
html: '=',
12-
onChange: '&'
13-
},
14-
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"></span><span class="knob"></span><span class="switch-right"></span></div></div>',
15-
controller: function($scope) {
16-
$scope.toggle = function toggle() {
17-
if(!$scope.disabled) {
18-
$scope.model = !$scope.model;
19-
}
20-
$scope.onChange();
21-
};
22-
},
23-
compile: function(element, attrs) {
24-
if (angular.isUndefined(attrs.onLabel)) { attrs.onLabel = 'On'; }
25-
if (angular.isUndefined(attrs.offLabel)) { attrs.offLabel = 'Off'; }
26-
if (angular.isUndefined(attrs.knobLabel)) { attrs.knobLabel = '\u00a0'; }
27-
if (angular.isUndefined(attrs.disabled)) { attrs.disabled = false; }
28-
if (angular.isUndefined(attrs.html)) { attrs.html = false; }
29-
30-
return function postLink(scope, iElement, iAttrs, controller) {
1+
angular.module('toggle-switch', ['ng']).directive('toggleSwitch', function($compile) {
2+
return {
3+
restrict: 'EA',
4+
replace: true,
5+
scope: {
6+
model: '=',
7+
disabled: '@',
8+
onLabel: '@',
9+
offLabel: '@',
10+
knobLabel: '@',
11+
html: '=',
12+
onChange: '&'
13+
},
14+
template: '<div class="ats-switch" ng-click="toggle()" ng-class="{ \'disabled\': disabled }"><div class="switch-animate" ng-class="{\'switch-off\': !model, \'switch-on\': model}"><span class="switch-left"></span><span class="knob"></span><span class="switch-right"></span></div></div>',
15+
controller: function($scope) {
16+
$scope.toggle = function toggle() {
17+
if (!$scope.disabled) {
18+
$scope.model = !$scope.model;
19+
}
20+
$scope.onChange();
21+
};
22+
},
23+
compile: function(element, attrs) {
24+
if (angular.isUndefined(attrs.onLabel)) {
25+
attrs.onLabel = 'On';
26+
}
27+
if (angular.isUndefined(attrs.offLabel)) {
28+
attrs.offLabel = 'Off';
29+
}
30+
if (angular.isUndefined(attrs.knobLabel)) {
31+
attrs.knobLabel = '\u00a0';
32+
}
33+
if (angular.isUndefined(attrs.disabled)) {
34+
attrs.disabled = false;
35+
}
36+
if (angular.isUndefined(attrs.html)) {
37+
attrs.html = false;
38+
}
3139

32-
var bindSpan = function (span, html) {
33-
span = angular.element(span);
34-
var bindAttributeName = (html === true) ? 'ng-bind-html' : 'ng-bind';
40+
return function postLink(scope, iElement, iAttrs, controller) {
3541

36-
// remove old ng-bind attributes
37-
span.removeAttr('ng-bind-html');
38-
span.removeAttr('ng-bind');
42+
var bindSpan = function(span, html) {
43+
span = angular.element(span);
44+
var bindAttributeName = (html === true) ? 'ng-bind-html' : 'ng-bind';
3945

40-
if(angular.element(span).hasClass("switch-left"))
41-
span.attr(bindAttributeName, 'onLabel');
42-
if(span.hasClass("knob"))
43-
span.attr(bindAttributeName, 'knobLabel');
44-
if(span.hasClass("switch-right"))
45-
span.attr(bindAttributeName, 'offLabel');
46+
// remove old ng-bind attributes
47+
span.removeAttr('ng-bind-html');
48+
span.removeAttr('ng-bind');
4649

47-
$compile(span)(scope, function(cloned, scope) {
48-
span.replaceWith(cloned);
49-
});
50-
};
50+
if (angular.element(span).hasClass("switch-left"))
51+
span.attr(bindAttributeName, 'onLabel');
52+
if (span.hasClass("knob"))
53+
span.attr(bindAttributeName, 'knobLabel');
54+
if (span.hasClass("switch-right"))
55+
span.attr(bindAttributeName, 'offLabel');
5156

52-
// add ng-bind attribute to each span element.
53-
// NOTE: you need angular-sanitize to use ng-bind-html
54-
var bindSwitch = function (iElement, html) {
55-
angular.forEach(iElement[0].children[0].children, function (span, index) {
56-
bindSpan(span, html);
57-
});
58-
};
57+
$compile(span)(scope, function(cloned, scope) {
58+
span.replaceWith(cloned);
59+
});
60+
};
5961

60-
scope.$watch('html', function (newValue) {
61-
bindSwitch(iElement, newValue);
62-
});
62+
// add ng-bind attribute to each span element.
63+
// NOTE: you need angular-sanitize to use ng-bind-html
64+
var bindSwitch = function(iElement, html) {
65+
angular.forEach(iElement[0].children[0].children, function(span, index) {
66+
bindSpan(span, html);
67+
});
68+
};
6369

64-
};
65-
}
66-
};
70+
scope.$watch('html', function(newValue) {
71+
bindSwitch(iElement, newValue);
72+
});
73+
};
74+
}
75+
};
6776
});

‎angular-toggle-switch.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/bootstrap2/angular-toggle-switch-bootstrap-2.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.switch {
1+
.ats-switch {
22
border: 1px solid;
33
cursor: pointer;
44
display: inline-block;
@@ -7,17 +7,17 @@
77
line-height: 8px;
88
min-width: 100px;
99
}
10-
.switch.disabled {
10+
.ats-switch.disabled {
1111
opacity: 0.5;
1212
filter: alpha(opacity=50);
1313
cursor: default !important;
1414
}
15-
.switch.disabled .switch-left,
16-
.switch.disabled .switch-right,
17-
.switch.disabled .knob {
15+
.ats-switch.disabled .switch-left,
16+
.ats-switch.disabled .switch-right,
17+
.ats-switch.disabled .knob {
1818
cursor: default !important;
1919
}
20-
.switch span {
20+
.ats-switch span {
2121
cursor: pointer;
2222
display: inline-block;
2323
float: left;
@@ -32,37 +32,37 @@
3232
-moz-box-sizing: border-box;
3333
-webkit-box-sizing: border-box;
3434
}
35-
.switch > div {
35+
.ats-switch > div {
3636
position: relative;
3737
width: 150%;
3838
}
39-
.switch .knob {
39+
.ats-switch .knob {
4040
background: red;
4141
border-left: 1px solid #ccc;
4242
border-right: 1px solid #ccc;
4343
background-color: #f5f5f5;
4444
width: 34%;
4545
z-index: 100;
4646
}
47-
.switch .switch-on {
47+
.ats-switch .switch-on {
4848
left: 0%;
4949
}
50-
.switch .switch-off {
50+
.ats-switch .switch-off {
5151
left: -50%;
5252
}
53-
.switch .swtich-left,
54-
.switch .switch-right {
53+
.ats-switch .swtich-left,
54+
.ats-switch .switch-right {
5555
z-index: 1;
5656
}
57-
.switch .switch-left {
57+
.ats-switch .switch-left {
5858
color: #fff;
5959
background: #005fcc;
6060
}
61-
.switch .switch-right {
61+
.ats-switch .switch-right {
6262
color: #333;
6363
background: #f0f0f0;
6464
}
65-
.switch .switch-animate {
65+
.ats-switch .switch-animate {
6666
transition: left 0.5s;
6767
-o-transition: left 0.5s;
6868
-moz-transition: left 0.5s;

0 commit comments

Comments
 (0)