Templates with more than one root element

[Robin Poltronieri]

I'm writing an accordion widget based on JQuery.accordion that should be definied in the markup as follows:

<my-accordion ...>

  <my-section title="title-expr1">

    section 1 contents goes here

  </my-section>

  <my-section title="title-expr2">

    section 2 contents goes here

  </my-section>

  ...

</my-accordion>

My implementation defines two directives (one for accordion container and one for section definition) but I have the following problem:

the rendered section should have the following HTML: 

<h3><a href="#">Section 1</a></h3>

<div>

<p>

[section contents] (ng-transclude)

</p>

</div>

(source view at http://jqueryui.com/demos/accordion/)

So the template must be someting similar to

<h3><a href="#">{{title}}</a></h3>

<div>

<p ng-transclude>

</p>

</div>

BUT, templates must have only one single root element.

I tried to use a template like

<div>

<h3><a href="#">{{title}}</a></h3>

<div>

<p ng-transclude>

</p>

</div>

</div>

but it doesn't render correctly when '.accordion' is applied.

I had a similar problem with 'radio buttons' where the template requires an input tag and a sibling label; in that case I solved surroding with a span (that didn't broke rendering on buttonset).

Any best practice to follow? Any idea?

Thank you.

[Eddie Huang]

Not supported :(

https://github.com/angular/angular.js/issues/1002

[Robin Poltronieri]

Thank you very much for your answer.

By now I solved this case using a div as a root element for the 'panel' template and instructing the accordion widget that the header element is a 'h3' tag (as demonstrated in one online example of JQuery-UI):

      .directive('jqAccordionPanel', function () {

          return {

              restrict: 'E',

              replace: true,

              transclude: true,

              scope: {

                  title: '=jqTitle'

              },

              template: '<div>' +

                        '  <h3><a href="#">{{title}}</a></h3>' +

                        '    <div ng-transclude></div>' +

                        '</div>',

              link: function (scope, element, attrs) {

              }

          }

      })

      .directive('jqAccordion', function () {

          return {

              restrict: 'E',

              replace: true,

              transclude: true,

              template: '<div ng-transclude>' +

                        '</div>',

              link: function (scope, element, attrs) {

                  element.accordion({header: 'h3'});

              }

          }

      })

It seems to work very well.

p.s. As far as i can see, Angular is by now the most innovative js framework

2012/8/16 Eddie Huang <co...@rocketmail.com>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
Robin Poltronieri.