Skip to content

Commit 9b855bb

Browse files
ziscloudziscloud
committed
fix issue #1 
1 parent 3c782da commit 9b855bb

File tree

4 files changed

+232
-174
lines changed

4 files changed

+232
-174
lines changed

‎dist/angular-bootstrap-toggle.js‎

Lines changed: 115 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -21,123 +21,152 @@
2121
/**
2222
* Type: string
2323
* Default: ''
24-
* Description: Size of the toggle. Possible values are btn-lg, btn-sm, btn-xs.
24+
* Description: Size of the toggle.
25+
* Possible values are btn-lg, btn-sm, btn-xs.
2526
*/
2627
size: '',
2728
/**
2829
* Type: string
2930
* Default: "btn-primary"
30-
* Description: Style of the on toggle. Possible values are btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger
31+
* Description: Style of the on toggle.
32+
* Possible values are btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger
3133
*/
3234
onstyle: 'btn-primary',
3335
/**
3436
* Type: string
3537
* Default: "btn-default"
36-
* Description: Style of the off toggle. Possible values are btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger
38+
* Description: Style of the off toggle.
39+
* Possible values are btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger
3740
*/
3841
offstyle: 'btn-default',
3942
/**
4043
* Type: string
4144
* Default: ''
42-
* Description: Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
45+
* Description: Appends the value to the class attribute of the toggle.
46+
* This can be used to apply custom styles. Refer to Custom Styles for reference.
4347
*/
4448
style: ''
4549
})
4650

4751
.controller('ToggleController',
48-
['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError',
49-
function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) {
50-
var self = this,
51-
ngModelCtrl = {$setViewValue: angular.noop};
52-
53-
// Configuration attributes
54-
angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key, index) {
55-
//$log.info(key + ':' + $attrs[key]);
56-
self[key] = angular.isDefined($attrs[key]) ? (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : toggleConfig[key];
57-
//$log.info(key + ':' + self[key]);
58-
});
59-
60-
this.init = function (ngModelCtrl_) {
61-
ngModelCtrl = ngModelCtrl_;
62-
63-
ngModelCtrl.$render = function () {
64-
self.render();
65-
};
66-
67-
ngModelCtrl.$viewChangeListeners.push(function () {
68-
$scope.$eval($attrs.ngChange);
52+
['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError',
53+
function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) {
54+
var self = this,
55+
ngModelCtrl = {$setViewValue: angular.noop};
56+
57+
// Configuration attributes
58+
angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key, index) {
59+
self[key] = angular.isDefined($attrs[key]) ?
60+
(index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) :
61+
toggleConfig[key];
6962
});
7063

71-
var labels = self.element.find('label');
72-
angular.element(labels[0]).html(self.on);
73-
angular.element(labels[1]).html(self.off);
74-
var spans = self.element.find('span');
75-
var wrapperComputedWidth = self.width || Math.max(labels[0].offsetWidth, labels[1].offsetWidth) + (spans[0].offsetWidth / 2);
76-
var wrapperComputedHeight = self.height || Math.max(labels[0].offsetHeight, labels[1].offsetHeight);
64+
this.init = function (ngModelCtrl_) {
65+
ngModelCtrl = ngModelCtrl_;
7766

78-
var divs = self.element.find('div');
79-
var wrapperWidth = divs[0].offsetWidth;
80-
var wrapperHeight = divs[1].offsetHeight;
67+
self.computeStyle();
8168

82-
$scope.wrapperStyle = {};
83-
if (wrapperWidth < wrapperComputedWidth) {
84-
$scope.wrapperStyle.width = wrapperComputedWidth + 'px';
85-
}
69+
ngModelCtrl.$render = function () {
70+
self.toggle();
71+
};
8672

87-
if (wrapperHeight < wrapperComputedHeight && self.size != 'btn-xs' && self.size != 'btn-sm') {
88-
$scope.wrapperStyle.height = wrapperComputedHeight + 'px';
89-
}
90-
$scope.onClass = [self.onstyle, self.size, 'toggle-on'];
91-
$scope.offClass = [self.offstyle, self.size, 'toggle-off'];
92-
$scope.handleClass = [self.size, 'toggle-handle'];
93-
};
73+
ngModelCtrl.$viewChangeListeners.push(function () {
74+
$scope.$eval($attrs.ngChange);
75+
});
76+
};
9477

95-
this.render = function () {
96-
if (angular.isDefined(ngModelCtrl.$viewValue)) {
97-
this.isOn = ngModelCtrl.$viewValue;
98-
} else {
99-
this.isOn = false;
100-
}
101-
if (this.isOn) {
102-
$scope.wrapperClass = [self.onstyle, self.size, self.style];
103-
} else {
104-
$scope.wrapperClass = [self.offstyle, 'off ', self.size, self.style];
105-
}
106-
};
78+
this.computeStyle = function () {
79+
var labels = self.element.find('label');
80+
angular.element(labels[0]).html(self.on);
81+
angular.element(labels[1]).html(self.off);
82+
var spans = self.element.find('span');
83+
var wrapperComputedWidth = self.width || Math.max(labels[0].offsetWidth, labels[1].offsetWidth) +
84+
(spans[0].offsetWidth / 2);
85+
var wrapperComputedHeight = self.height || Math.max(labels[0].offsetHeight, labels[1].offsetHeight);
86+
87+
var divs = self.element.find('div');
88+
var wrapperWidth = divs[0].offsetWidth;
89+
var wrapperHeight = divs[1].offsetHeight;
90+
91+
$scope.wrapperStyle = {};
92+
if (wrapperWidth < wrapperComputedWidth) {
93+
$scope.wrapperStyle.width = wrapperComputedWidth + 'px';
94+
} else {
95+
$scope.wrapperStyle.width = wrapperWidth + 'px';
96+
}
97+
98+
if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') {
99+
$scope.wrapperStyle.height = wrapperComputedHeight + 'px';
100+
} else {
101+
$scope.wrapperStyle.height = wrapperHeight + 'px';
102+
}
103+
104+
$scope.onClass = [self.onstyle, self.size, 'toggle-on'];
105+
$scope.offClass = [self.offstyle, self.size, 'toggle-off'];
106+
$scope.handleClass = [self.size, 'toggle-handle'];
107+
};
107108

108-
$scope.onSwitch = function (evt) {
109-
ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue);
110-
ngModelCtrl.$render();
111-
};
109+
this.toggle = function () {
110+
if (angular.isDefined(ngModelCtrl.$viewValue)) {
111+
this.isOn = ngModelCtrl.$viewValue;
112+
} else {
113+
this.isOn = false;
114+
}
115+
if (this.isOn) {
116+
$scope.wrapperClass = [self.onstyle, self.size, self.style];
117+
} else {
118+
$scope.wrapperClass = [self.offstyle, 'off ', self.size, self.style];
119+
}
120+
};
112121

113-
// Watchable date attributes
114-
angular.forEach(['ngModel'], function (key) {
115-
var watch = $scope.$parent.$watch($attrs[key], function (value) {
122+
$scope.onSwitch = function (evt) {
123+
ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue);
116124
ngModelCtrl.$render();
125+
};
126+
127+
// Watchable date attributes
128+
angular.forEach(['ngModel'], function (key) {
129+
var watch = $scope.$parent.$watch($attrs[key], function (value) {
130+
ngModelCtrl.$render();
131+
});
132+
$scope.$parent.$on('$destroy', function () {
133+
watch();
134+
});
117135
});
118-
$scope.$parent.$on('$destroy', function () {
119-
watch();
136+
137+
angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key) {
138+
$attrs.$observe(key, function (val) {
139+
if (self[key] !== val) {
140+
self[key] = val;
141+
self.computeStyle();
142+
}
143+
});
120144
});
121-
});
122-
}])
145+
}])
123146

124147
.directive('toggle', function () {
125-
return {
126-
restrict: 'E',
127-
transclude: true,
128-
template: '<div class="toggle btn" ng-class="wrapperClass" ng-style="::wrapperStyle" ng-click="onSwitch()"><div class="toggle-group"><label class="btn" ng-class="::onClass"></label><label class="btn active" ng-class="::offClass"></label><span class="btn btn-default" ng-class="::handleClass"></span></div></div>',
129-
scope: {
130-
bindModel: '=ngModel'
131-
},
132-
require: ['toggle', 'ngModel'],
133-
controller: 'ToggleController',
134-
controllerAs: 'toggle',
135-
link: function (scope, element, attrs, ctrls) {
136-
var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1];
137-
toggleCtrl.element = element;
138-
toggleCtrl.init(ngModelCtrl);
139-
}
140-
};
141-
}
142-
);
148+
return {
149+
restrict: 'E',
150+
transclude: true,
151+
template: '<div class="toggle btn" ng-class="wrapperClass" ng-style="wrapperStyle" ng-click="onSwitch()">' +
152+
'<div class="toggle-group">' +
153+
'<label class="btn" ng-class="onClass"></label>' +
154+
'<label class="btn active" ng-class="offClass"></label>' +
155+
'<span class="btn btn-default" ng-class="handleClass"></span>' +
156+
'</div>' +
157+
'</div>',
158+
scope: {
159+
bindModel: '=ngModel'
160+
},
161+
require: ['toggle', 'ngModel'],
162+
controller: 'ToggleController',
163+
controllerAs: 'toggle',
164+
link: function (scope, element, attrs, ctrls) {
165+
var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1];
166+
toggleCtrl.element = element;
167+
toggleCtrl.init(ngModelCtrl);
168+
}
169+
};
170+
}
171+
);
143172
})();

‎dist/angular-bootstrap-toggle.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.

‎gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ gulp.task('less', function () {
3636
.pipe(gulp.dest('./dist/'))
3737
.pipe(minifyCSS({compatibility: 'ie8'}))
3838
.pipe(rename(function (path) {
39-
path.basename += ".min";
39+
path.basename += '.min';
4040
}))
4141
.pipe(gulp.dest('./dist'));
4242
});

0 commit comments

Comments
 (0)