From ca6b177db1f042d3fc4abc47499e8c76ac25a66c Mon Sep 17 00:00:00 2001
From: Sam Julien <spjulien@gmail.com>
Date: Tue, 2 Feb 2016 13:39:34 -0800
Subject: [PATCH] feat(accordion): use attribute for heading insertion

- 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.
---
 src/accordion/accordion.js              | 5 +++--
 src/accordion/docs/readme.md            | 2 ++
 template/accordion/accordion-group.html | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/accordion/accordion.js b/src/accordion/accordion.js
index 002daedca9..f0b4748799 100644
--- a/src/accordion/accordion.js
+++ b/src/accordion/accordion.js
@@ -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);
         }
       });
     }
diff --git a/src/accordion/docs/readme.md b/src/accordion/docs/readme.md
index 10e9c2986e..e176d8fde2 100644
--- a/src/accordion/docs/readme.md
+++ b/src/accordion/docs/readme.md
@@ -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.
diff --git a/template/accordion/accordion-group.html b/template/accordion/accordion-group.html
index 88c05f4eda..728c674c1c 100644
--- a/template/accordion/accordion-group.html
+++ b/template/accordion/accordion-group.html
@@ -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">