Remove 'span' dependency in uibAccordionTransclude

[elis]

Hello - I'm working with the accordion thingy now, and need to put some pretty complex HTML inside the 'heading' part of the accordion.

Having a 'span' required inside the template is really bad idea, since span is a inline-level element and if you decide to put block-level elements inside that you're basically breaking HTMLs best practice when it comes to div's inside a's and span's.

I'm talking about this particular piece of code:

  // Use in the accordion-group template to indicate where you want the heading to be transcluded
  // You must provide the property on the accordion-group controller that will hold the transcluded element
  .directive('uibAccordionTransclude', function() {
    return {
      require: ['?^uibAccordionGroup', '?^accordionGroup'],
      link: function(scope, element, attrs, controller) {
        controller = controller[0] ? controller[0] : controller[1]; // Delete after we remove deprecation
        scope.$watch(function() { return controller[attrs.uibAccordionTransclude]; }, function(heading) {
          if (heading) {
            element.find('span').html('');
            element.find('span').append(heading);
          }
        });
      }
    };
  });

Why not use a dedicated attribute that indicates a transclude target? Something along the lines of uib-accordion-transclude-traget rather than relying on a particular element?

[icfantv]

At first glance, this sounds reasonable to me. In addition, it would require anyone using a custom template to adhere to our DOM element decision.

[wesleycho]

I'm open to changing this to

var elem = angular.element(element[0].querySelector('[uib-accordion-header]'));

And changing the template accordingly. This would be a breaking change, but one that would let users override the template so that it automatically inserts it appropriately with minimal runtime overhead.

[samjulien]

Submitting PR for this.