Tab heading transclusion breaks directive 'require' property

[Coridyn]

I have found that the tabHeadingTransclude directive prevents required parent controllers from being passed through to directive link functions.

Here is an example showing the issue: http://plnkr.co/edit/GKUdOkkgsVKAGOLUpwBy?p=preview

I expect the showInheritedData directives inside the tab headings to show the text Inherited data= "this was inherited". However, they are showing Inherited data= "No inherited data available." because the directive link function doesn't receive the parent controller.

I think this problem occurs because the tabHeadingTransclude $watch expression executes after 'tab.$transcludeFn' method. This means the headingElement isn't on the DOM when Angular tries to check up the chain to resolve the directive's require attribute.

_Possible solution:_
I a fix for the tabHeadingTransclude directive that $compiles the headingElement content before appending it on the DOM: http://plnkr.co/edit/7BsaBEzMBUrNEt8yL2BN?p=preview

Is this an appropriate solution to this problem?

Thanks,
-Coridyn

[rvanbaalen]

Can you confirm this is still an issue with UI Bootstrap 0.13 and Angular 1.3?

[Coridyn]

Hi, sorry about the delay in checking this.

Yes, I've confirmed that the issue still occurs in Angular 1.3 (and 1.4.1) and UI Bootstrap 0.13.

Here is the updated plunker I used to check the issue: http://plnkr.co/edit/otcWoroTMmVrj6IBZRLY?p=preview

[wesleycho]

How the transclusion happens currently with tabs needs to be refactored - it is not properly handled.