Html content in tabHeading

[picolo74]

Hi,
If the tabHeading is an html content the content in tabScrollTitle is not rendered because it use tabScope.headingElement.textContent vs innerHTML.

Can you Handle Html ?

[Shemesh]

hi,
have you tried using the "data-tabScrollHeading" attribute? its intention is exactly for a cases like you've described.
"put this on a tab and the value of it will be the text for this tab's tooltip and drop-down item."

does this solve it for you?

[picolo74]

Thanx for your answer, i did not see this atributes.
i tried "data-tabScrollHeading" but :

• it only affect the tooltip
• the drop-down item contains uncompiled html

Plus, my heading contgains some logic (ng-if..) based on the tab content. I can't put the code in an attributes.

Do you want a plunker ?

[Shemesh]

yes please, plunkr would be great.

[picolo74]

plunkr : http://plnkr.co/edit/fwFrfYGJkAwezqphog5A?p=preview

I noticed another inconvinient behaviour with data-tabScrollHeading :

i added data-tabScrollHeading on the last tab, if html compile was working, i should add the logic in both the heading and this attribute to have the same text everywhere.

I think that if you want different content in the heading and the toolpit (and maybe the drop-down) , there must be different attributes :

• data-tabScrollToolTipLabel
• data-tabScrollDropDownLabel
• And if you want the same text everywhere, tabScope.headingElement.textContent should use the compiled innerHTML or a specific attr like data-tabScrollHtmlLabel

but i think that data-tabScrollHtmlLabel cannot contains complicated logic. Maybe it should be a flag instead :

data-tabScrollHtmlLabel : true/false to compile the heading or not.

[Shemesh]

see this plunkr, it is based on yours: http://plnkr.co/edit/fiY8qhM5G6aGsZRz25yX?p=preview

as you can see the data-tabScrollHeading does affect the tooltips and the drop-down, and it does have a working binding inside it.

the tooltip and drop-down are showing plain text, they are not intended to show html, their intention is to reflect the text from the tab header.

does this answer your needs?

[picolo74]

Not, really, in fact my last Tab heading is a plus and only contains a span :

I will remove the dropdown.

Thank you

[Shemesh]

it seems we have the same situation - me too have a plus on the last tab..
that is why you have the data-tabScrollIgnore attribute - if there is 'data-tabScrollIgnore="true"' on a tab than it will not be shown in the drop-down.

p.s. if you want to hide the drop-down you can use show-drop-down.

please read the documentation.

[Shemesh]

hi @picolo74 , @h6784rfg6 ...
i'm not sure how to implement this, any help would be good.