feat(tab): make templateUrl configurable

[jdewit]

I need the ability to have different markup for some tabs on a page
by page basis. Injecting templates with the script tag on each page
is getting ugly.

This topic was recently brought up again in #1611.

@sudhakar mentions a similar need for this in #105.

Usage

<tabset template-url="custom_tab_template">
  <tab heading="Stuff">
    Some Stuff
  </tab>
</tabset>

[pkozlowski-opensource]

@jdewit thnx for this PR, I think that the general direction is the right one, but we need to make it generic across the project. Things that worry me at the moment are:

• certain directives got more than one template (tabset is one of them! https://github.com/angular-ui/bootstrap/tree/master/template/tabs so one attribute doesn't cover all the use-cases)
• we might have multiple directives on the same element (say, a tab with a tooltip) so we would need to prefix this attr somehow (tabs-template-url?).

Actually I was thinking of a slightly different approach where one could specify a template "family", sthh like:

<tabset ts-template-family="mycustom">
...
</tabset>

and then templates would be taken from the /template/tabs/mycustom/tab.html and /template/tabs/mycustom/tabset.html instead of the defaults /template/tabs/tab.html and /template/tabs/tabset.html. Should be pretty trivial to implement.

WDYT?

[mvhecke]

@pkozlowski-opensource It's a really good idea, except we should take in mind that sometimes only a small part needs a custom template. For example, the tabset needs to have a custom template but the tab doesn't.

[pkozlowski-opensource]

@Gamemaniak true, but we could have a "smart" strategy, where we would fallback to the standard "family" if a given template doesn't exist in a custom set. Then again, this is just an idea atm, I can see it being easily implementable but not sure about the API / ease of use.

[jdewit]

I haven't had a need for it on other directives but that does sound like a good idea.

[bekos]

If I am not missing something, I am not so keen of the family idea, because I think we lose in flexibility. So, in case we have 2 flavours of tabset and 2 of tab, in order to be able to mix them we have to create 4 family sets, and so on if we have 3 or more.

[mvhecke]

What about the option to define families but still give people the flexibility to declare templates for the sub directives? Then you'll be able to mix them without the need of defining 4 family sets. For example:

For a complete family

<tabset bs-template="'mycustom'">
</tabset>

Partial

<tabset bs-template="{tabset: 'mycustom', tab: 'default'}">
</tabset>

[bekos]

Since both tabset and tab are exposed to the user, a simpler approach would be:

<tabset template-url="mytabset.html">
   <tab template-url="my-custom-tab.html"></tab>
   .....
   <tab template-url="my-custom-tab2.html"></tab>
</tabset>

This way we allow to customize each tab separately. How does this sound?

BTW, I think we should mark this issue and the prefix one as high priority :-)

[joshkurz]

+1
On Feb 25, 2014 5:52 AM, "Tasos Bekos" notifications@github.com wrote:

Since both tabset and tab are exposed to the user, a simpler approach
would be:

.....

This way we allow to customize each tab separately. How does this sound?

BTW, I think we should mark this issue and the prefix one as high priority
:-)

Reply to this email directly or view it on GitHubhttps://github.com//pull/1706#issuecomment-35995903
.

[Foxandxss]

I agree on the high priority stuff. Ping me if you need me to do something for that :)

[ngottlieb]

What's the status on this, is this PR going to be merged at any point? it's a great / necessary feature...I like @bekos's suggested approach for having both tab and tabset templates customizable.

[Avtonom]

"This pull request can be automatically merged by project collaborators."
thank you very much!
#1706 (comment)
+1

[Avtonom]

please add tag version to git
https://github.com/angular-ui/bootstrap/blob/master/package.json#L4