diff --git a/src/accordion/accordion.js b/src/accordion/accordion.js index 9b07a96131..92d2610dc4 100644 --- a/src/accordion/accordion.js +++ b/src/accordion/accordion.js @@ -66,7 +66,11 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse', 'ui.bootstrap heading: '@', // Interpolate the heading attribute onto this scope panelClass: '@?', // Ditto with panelClass isOpen: '=?', - isDisabled: '=?' + isDisabled: '=?', + collapsed: '&?', + collapsing: '&?', + expanded: '&?', + expanding: '&?' }, controller: function() { this.setHeading = function(element) { diff --git a/src/accordion/docs/readme.md b/src/accordion/docs/readme.md index 25f790c3fa..f0422cd201 100644 --- a/src/accordion/docs/readme.md +++ b/src/accordion/docs/readme.md @@ -16,6 +16,26 @@ The body of each accordion group is transcluded into the body of the collapsible ### uib-accordion-group settings +* `collapsed()` + $ - + An optional expression called after the element finished collapsing. + +* `collapsing()` + $ - + An optional expression called before the element begins collapsing. + If the expression returns a promise, animation won't start until the promise resolves. + If the returned promise is rejected, collapsing will be cancelled. + +* `expanded()` + $ - + An optional expression called after the element finished expanding. + +* `expanding()` + $ - + An optional expression called before the element begins expanding. + If the expression returns a promise, animation won't start until the promise resolves. + If the returned promise is rejected, expanding will be cancelled. + * `heading` _(Default: `none`)_ - The clickable text on the group's header. You need one to be able to click on the header for toggling. diff --git a/src/accordion/test/accordion.spec.js b/src/accordion/test/accordion.spec.js index 1879d6f9c4..155774f45e 100644 --- a/src/accordion/test/accordion.spec.js +++ b/src/accordion/test/accordion.spec.js @@ -154,7 +154,7 @@ describe('uib-accordion', function() { }); describe('uib-accordion-group', function() { - var scope, $compile; + var scope, $compile, $animate; var element, groups; var findGroupHeading = function(index) { return groups.eq(index).find('.panel-heading').eq(0); @@ -166,9 +166,10 @@ describe('uib-accordion', function() { return groups.eq(index).find('.panel-collapse').eq(0); }; - beforeEach(inject(function(_$rootScope_, _$compile_) { + beforeEach(inject(function(_$rootScope_, _$compile_, _$animate_) { scope = _$rootScope_; $compile = _$compile_; + $animate = _$animate_; })); it('should allow custom templates', inject(function($templateCache) { @@ -620,5 +621,53 @@ describe('uib-accordion', function() { expect(findGroupLink(0).text()).toBe('baz'); })); }); + + describe('event', function() { + beforeEach(function() { + var tpl = + '' + + '
' + + 'Body' + + '
' + + '
'; + element = $compile(tpl)(scope); + scope.$digest(); + groups = element.find('.panel'); + }); + + it('on expanding is triggered', function() { + scope.expanding = function() {}; + spyOn(scope, 'expanding'); + findGroupLink(0).click(); + expect(scope.expanding).toHaveBeenCalled(); + }); + + it('on expanded is triggered', function() { + scope.expanded = function() {}; + spyOn(scope, 'expanded'); + findGroupLink(0).click(); + $animate.flush(); + expect(scope.expanded).toHaveBeenCalled(); + }); + + it('on collapsed is triggered', function() { + scope.collapsed = function() {}; + spyOn(scope, 'collapsed'); + findGroupLink(0).click(); + findGroupLink(0).click(); + expect(scope.collapsed).toHaveBeenCalled(); + }); + + it('on collapsing is triggered', function() { + scope.collapsing = function() {}; + spyOn(scope, 'collapsing'); + findGroupLink(0).click(); + $animate.flush(); + findGroupLink(0).click(); + expect(scope.collapsing).toHaveBeenCalled(); + }); + + }); + }); }); diff --git a/template/accordion/accordion-group.html b/template/accordion/accordion-group.html index 8cae8c023b..49103d3ebf 100644 --- a/template/accordion/accordion-group.html +++ b/template/accordion/accordion-group.html @@ -3,6 +3,6 @@

{{heading}}

-
+