Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(accordion): use attribute for heading insertion
Browse files Browse the repository at this point in the history
- Change to use `uibAccordionHeader` attribute for insertion point for header transclusion

Closes #5324
Closes #5396

BREAKING CHANGE: This changes to use the `uibAccordionHeader` attribute instead of a `<span>` element for inserting the custom header HTML. If you use a custom template for the accordion group, please add this attribute to the appropriate location.
  • Loading branch information
samjulien authored and wesleycho committed Feb 4, 2016
1 parent a5aebda commit ca6b177
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 3 deletions.
5 changes: 3 additions & 2 deletions src/accordion/accordion.js
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,9 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
link: function(scope, element, attrs, controller) {
scope.$watch(function() { return controller[attrs.uibAccordionTransclude]; }, function(heading) {
if (heading) {
element.find('span').html('');
element.find('span').append(heading);
var elem = angular.element(element[0].querySelector('[uib-accordion-header]'));
elem.html('');
elem.append(heading);
}
});
}
Expand Down
2 changes: 2 additions & 0 deletions src/accordion/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ The body of each accordion group is transcluded into the body of the collapsible

Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.

If you're using a custom template for the `uib-accordion-group`, you'll need to have an element for the heading to be transcluded into using `uib-accordion-header` (e.g. `<div uib-accordion-header></div>`).

### Known issues

To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add `cursor: pointer` in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.
Expand Down
2 changes: 1 addition & 1 deletion template/accordion/accordion-group.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="panel" ng-class="panelClass || 'panel-default'">
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
<a role="button" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen">
Expand Down

0 comments on commit ca6b177

Please sign in to comment.