diff --git a/src/progressbar/progressbar.js b/src/progressbar/progressbar.js index 3cb855e53d..55fbabefb9 100644 --- a/src/progressbar/progressbar.js +++ b/src/progressbar/progressbar.js @@ -19,10 +19,16 @@ angular.module('ui.bootstrap.progressbar', []) this.bars.push(bar); + bar.max = $scope.max; + bar.$watch('value', function( value ) { - bar.percent = +(100 * value / $scope.max).toFixed(2); + bar.recalculatePercentage(); }); + bar.recalculatePercentage = function() { + bar.percent = +(100 * bar.value / bar.max).toFixed(2); + }; + bar.$on('$destroy', function() { element = null; self.removeBar(bar); @@ -32,6 +38,14 @@ angular.module('ui.bootstrap.progressbar', []) this.removeBar = function(bar) { this.bars.splice(this.bars.indexOf(bar), 1); }; + + $scope.$watch('max', (function(self){ + return function(max) { + self.bars.forEach(function (bar) { + bar.max = $scope.max; + bar.recalculatePercentage(); + }); + }})(this)); }]) .directive('progress', function() { @@ -41,7 +55,9 @@ angular.module('ui.bootstrap.progressbar', []) transclude: true, controller: 'ProgressController', require: 'progress', - scope: {}, + scope: { + max: '=?' + }, templateUrl: 'template/progressbar/progress.html' }; }) @@ -54,7 +70,6 @@ angular.module('ui.bootstrap.progressbar', []) require: '^progress', scope: { value: '=', - max: '=?', type: '@' }, templateUrl: 'template/progressbar/bar.html', diff --git a/src/progressbar/test/progressbar.spec.js b/src/progressbar/test/progressbar.spec.js index fef4f4accd..c0500fd931 100644 --- a/src/progressbar/test/progressbar.spec.js +++ b/src/progressbar/test/progressbar.spec.js @@ -116,7 +116,7 @@ describe('progressbar directive', function () { it('transcludes "bar" text', function() { expect(getBar(0).text()).toBe('22/200'); }); - + it('adjusts the valuemax when it changes', function() { expect(getBar(0).attr('aria-valuemax')).toBe('200'); $rootScope.max = 300; @@ -215,5 +215,49 @@ describe('progressbar directive', function () { expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-success'); expect(getBar(0)).not.toHaveClass(BAR_CLASS + '-warning'); }); + + describe('"max" attribute', function() { + beforeEach(inject(function() { + $rootScope.max = 200; + element = $compile('{{o.value}}/{{max}}')($rootScope); + $rootScope.$digest(); + })); + + it('has the appropriate aria markup', function() { + expect(getBar(0).attr('aria-valuemax')).toBe('200'); + }); + + it('adjusts the "bar" width when it changes', function() { + expect(getBar(0).css('width')).toBe('5%'); + $rootScope.max = 250; + $rootScope.$digest(); + expect(getBar(0).css('width')).toBe('4%'); + }); + + it('adjusts the "bar" width when value changes', function() { + $rootScope.objects[0].value = 60; + $rootScope.$digest(); + expect(getBar(0).css('width')).toBe('30%'); + + $rootScope.objects[0].value += 12; + $rootScope.$digest(); + expect(getBar(0).css('width')).toBe('36%'); + + $rootScope.objects[0].value = 0; + $rootScope.$digest(); + expect(getBar(0).css('width')).toBe('0%'); + }); + + it('transcludes "bar" text', function() { + expect(getBar(0).text()).toBe('10/200'); + }); + + it('adjusts the valuemax when it changes', function() { + expect(getBar(0).attr('aria-valuemax')).toBe('200'); + $rootScope.max = 300; + $rootScope.$digest(); + expect(getBar(0).attr('aria-valuemax')).toBe('300'); + }); + }); }); });