Custom header with nested directives using ng-transclude


#1

Alright, so I’m working on making a single custom header directive to use across the app I am working on, however I have run into issues with data binding.

A quick intro, I have a header directive currently implemented, with it’s own isolated scope. Now on certain pages of the app, I need a favorite star to be added to the header. This favorite star is setup as it’s own directive, with it’s own isolated scope as well. I am inserting the star using ng-transclude in my custom header directive, however I am unable to pass any value from the controller, to the favorite star directive. They are always coming through as undefined. (You can see this by clicking the star in the header, and seeing the undefined values in the console logs in the linked codepen)

Here is the codepen with just the relevent code: http://codepen.io/ms1752/pen/zhujB


#2

Why two directives? it is one element - the headerbar and in the header bar there is a fav star sometimes and sometimes not. So one directive would be enough.

Your custom header has an isolated scope (it is empty) -> so the inner directive has no access to other parent scopes :wink:


#3

The main reason for two directives is they both have some logic specific to them, and keeping them separated seems like the right choice to us.

I’ve been able to get an example of this working without using Ionic is this plunker: http://plnkr.co/edit/yGxIL1l87CUD6MTXWjX7?p=preview

If you click on the 4th line of text, you’ll see that “Testing 2” is logged as expected.

I even just tried removing the isolated scope on the header directive in my original codepen, and the values being passed to the fav star are still being seen as undefined.


#4

i fixed a little issue… it is working.

you have to name your attributes like your directive (not only “key”).

Greetz, bentgler


#5

Thanks for that! While that didn’t end up being the root cause, it pointed me in the right direction.

Ultimately the issue was because in my actual implementation I also had an ng-if on the div element with the ng-transclude. This was causing another scope to be made, and making me lose the values from the controller. Once I changed this to an ng-show, my directives are acting as expected.

Thanks again for the help @bengtler