Angular multiple directive elements with same parent

Question

How can one do this?

I've provided a Fiddle to demonstrate my problem: http://jsfiddle.net/FCAJD/

myApp.directive('tabs', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<ul ng-transclude></ul>'
    }
});

myApp.directive('tab', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<li>test</li>'
    }
});

And the html:

<div ng-controller="MyCtrl">
  <tabs>
      <tab />
      <tab />
      <tab />
      <tab />
  </tabs>
</div>

Essentially, I want "test" to show up multiple times

KayakDave · Accepted Answer · 2013-12-19 03:42:18Z

4

You need to explicitly terminate the directives.

So instead of:

<tab /> 
...

You want:

<tab></tab>
...

Updated fiddle

You can see this related Angular github issue. With this comment from one of the Angular folks (Igor Minar):

self-closing or void elements as the html spec defines them are very special to the browser parser. you can't make your own, so for your custom elements you have to stick to non-void elements (<foo></foo>).

edited Dec 19, 2013 at 3:42

answered Dec 19, 2013 at 0:18

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RedactedProfile Over a year ago

JEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEZZZ slaps self Thank you! I have no valid reason why I didn't attempt to do that (except that i didn't really have many reasons to believe it was the self closing aspect causing the problem)

Collectives™ on Stack Overflow

Angular multiple directive elements with same parent

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related