3

I'm currently trying to create a directive that has two transcluded sections and have been unsuccessful so far. Now I discovered that the tab directive of Angular UI Bootstrap does exactly that! Unfortunately, the angular trickery that they pull off in their source code is apparently too advanced for my understanding.

In the examples, they have the following code:

<tabset>
  <tab select="alertMe()">
    <tab-heading>
      <i class="glyphicon glyphicon-bell"></i> Alert!
    </tab-heading>
    I've got an HTML heading, and a select callback. Pretty cool!
  </tab>
</tabset>

This is exactly what I need. Can someone explain to me the steps that I need to take, so that the <tab-heading> content is transcluded in one spot, and the other stuff in another?

Things I don't understand in the sources:

  • There is no directive tabHeading only a tabHeadingTransclude. How is the <tab-heading> element found, then? I also don't see a query for such elements anywhere.
  • I also don't understand the two transclude-directives tabContentTransclude and tabHeadingTransclude.
theDmi
  • 17,546
  • 6
  • 71
  • 138

1 Answers1

1

You ALMOST had it when you were looking at the tabHeadingTransclude directive. A few lines down is the tabContentTransclude directive. Take a look at the source code here.

Ultimately, the content of either the tab-heading attribute or the <tab-heading> directive is placed inside the {{heading}} expression in the tab template here.

You can glean this from the link function in the tabContentTransclude directive: We set the value of the node (the tab-heading attribute or the <tab-heading> directive) on tab.headingElement which we are watching in the tabHeadingTransclude directive. And when it changes, we update the template.

icfantv
  • 4,523
  • 7
  • 36
  • 53