Rendering another directive inside foundation-apps directives

[34r7h]

I don't think this is related to #596 and forgive me if this issue was already brought up. I'm want to inject ng-map map directive inside the zurb accordian directive. Doing so creates the space for the map but doesn't render the map. If I take the same code outside the directive it will work. Any ideas of what to try?

here's my repo if it helps: https://github.com/irthos/medviz

Thank you!

[gakimball]

Do you get any JavaScript errors?

[34r7h]

thanks.. no javascript errors in the browser console. the inspector shows the map directive being there but not rendering the map tiles.

[playnox]

Confirming... none of the angular directories work inside zf-* directories I tried to use simple ng-repeat, ng-click and etc. inside zf-tabs (no luck). Console doesn't provide any errors since it's simply missing a $scope data, looks like zf directories are using it's own scope.

[soumak77]

I'm having the same issue with the tabs directive. A similar issue was observed with the zf-iconic directive (#569) and was resolved with change cce52b4aef7b49ac9d07ff60c85d700ce4fe6af8. I'm seeing the same root cause in that the directives are not copied to the element, though I'm not sure if it's the same issue. I think the problem revolves around the usage of transclude in the tabs. I think a solution similar to the one I used for developing the interchange directives might be needed (https://github.com/zurb/foundation-apps/pull/549/files). I'll play around with it for awhile and see what I can figure out.

[soumak77]

The tabs are transclusion hell! The attribute issue was part, but not the whole story. The root problem is that all tab trancludes are done during the post link operation on the element. The post link of an element occurs after all children elements have been post linked. What this means is, any directives within a tab are being run before the raw content is transcluded into the tab causing angular to be unaware that a directive exists within the tab.

As I mentioned, transferring attributes is another issue with the tabs. This can be fixed similar to cce52b4aef7b49ac9d07ff60c85d700ce4fe6af8, however, it must be noted that if directives are used on the same element as the zf-tab directive, the zf-tab directive will need to be recompiled after copying the attributes. If the directives are used in children of the zf-tab directive, no recompile will needed as children directives will be compiled after the zf-tab directive once the tab directives are fixed to transclude the correct data.

[gaboratorium]

Is there a solution for this? I am having this problem as well and it is really annoying indeed. I would like to use directives inside zf-tabs, but they don't work (and they don't even throw any errors). Of course I can write my own directives for tabs, but this makes zf-tabs completely useless.

[mrova]

I have code like this, with components (sessions-one-list, sessions-group-list) and it works just fine with zf-tabs.

.main_section-aside-inner
    div.tabs_nav(zf-tabs="")
        div(zf-tab="", title="1:1 SESSIONS" ng-mousedown="$ctrl.changeLink(true)")
            sessions-one-list(
                mom="$parent.$ctrl.mom",
                one="$parent.$ctrl.sessionsOne.present",
                one-past="$parent.$ctrl.sessionsOne.past"
                active-edit-session="$parent.$ctrl.activeEditSession"
                show-modal="$parent.$ctrl.showModal"
            )
        div(zf-tab="", title="GROUP SESSIONS" ng-mousedown="$ctrl.changeLink(false)")
            sessions-group-list(
                mom="$parent.$ctrl.mom", 
                group="$parent.$ctrl.sessionsGroup.present",
                group-past="$parent.$ctrl.sessionsGroup.past",
            )

[paper-coffee]

I guess this plugin was written by some interns. maybe even whole foundation for apps!

[jf0rce]

For anyone who is running into this issue, I was able to get around this by effectively changing this line from

element.append(tabContent);

to

element.append($compile(tabContent)(scope));

[34r7h]

+1 $compile ftw

[betommy23]

Using $parent should let you access to the parental scope outside of zf-tabs. It will be nice if the documentation is more clear on these details.

[soumak77]

this issue with be addressed with https://github.com/base-apps/angular-base-apps/issues/24