Angular data not binding in zf-tabs

[mattgrande]

I'm trying to dynamically create tabs. The titles are showing up correctly, but the content within the tabs isn't being replaced with the proper data.

<div zf-tabs="">
    <div ng-repeat="(key, data) in vm.feedTabs" zf-tab="" title="{{key}} -> {{data.length}}">
        Content for {{key}}. {{data.length}} tabs found.
    </div>
</div>

The tab titles show up properly (eg, "Tab One -> 15"), however within the tab, the data shows up as "Content for . tabs found."

[gjungb]

@mattgrande this is due to the transclusion hell caused by the nesting of zf-tabs, zf-tab and zf-tab-individual. For a quick and dirty solution try this: Content for {{ $parent.key }}. {{ $parent.data.length }} tabs found.

[mattgrande]

Thanks, I'll try that out. For the time being, I decided to make my buttons look like tabs (which is probably a better idea in my case regardless).

[jamieshark]

For some of the other components, I've started adding in a way to "funnel" in your parent scope, and I'll look into doing this for tabs as well. Closing this issue for now.

[vincentpalita]

Hello there ! @jeanieshark : did you make any progress on this ? I am using the zf-tabs and the way we access the parent scope can be disturbing. Also, maybe I am wrong, but we cannot use the controllerAs alias inside a tab. That makes the whole thing really hard to track and to maintain.

Would love to hear from you about this. Cheers, Vincent

[maman]

still affected by this issue ... why this is issue is closed?

[makas2]

Why it's close? I have the same problem. And way use $parent daoesn't work any where. angular ui-select component can't find model inside zf-tabs.

[paper-coffee]

very poor design of zf-tabs!

[makas2]

I have found solution. First way we can set for every tab separeate controller. The second way is to find scope for each tab item and set up data model. To realaize second way firs of all you have to get DOM element of zf-tabs - angular.element(document.getElementbyId('zf-tabs element id')) get child elements and getting scope() of them.