Ion-view view-title not working using ion-nav-view to render custom directives

ionic-v1
1

Hi,

I am having some trouble with the view-title property of the ion-view directive when using the ui-router to render custom directives. Basically when I use custom directives directly in the router the title in the navbar doesn’t show.
I’ve built a small example in codepen to show my issue:

Any ideia why this is not working? If I change the template property to templateUrl it does work.

Thks

2

hehe, no that will not work.

should keep the needed dom-structure alive like
ion-nav-view
ion-view

in your example you get
ion-nav-view
calendar
ion-view

how should ionic recognize, how to get the ion-view and the connected scope if there is another directive between them.

Even you could notice that, that your ion-content is not automatically pushed down the navbar --> so ionic can not find the ion-content correctly to add the has-header class. (you should not do it on your own)

You will even destroy view caching and so on.

3

@bengtler You say it like there is no doubt about it. The angular documentation says about the directives require option that the “… ^ prefix means that this directive searches for the controller on its parents”. So from my understanding it is not explicitly necessary to define the required parent as the next parent - Instead it can be any parent. That’s angulars design and that’s why I would expect the ion-nav-title to work this way. Or am I wrong?

Nevertheless, it isn’t working. So any solutions for that problem? Any workaround? @adgoncalves What have you done to fix this? I really would like to get ionic to work with the component style.

4

So i run into this problem as i tried to use angular compoments/directives to structure my app.

So i had a global ion-nav-view --> then the directive/compoment, which hangs in the ion-view. It does not work, because if you look into the source code, much initializing stuff is connected with the ionicView-events. If you are working in a directive/component --> you have a gap between the view-beforeEnter/enter events are firing and the compilation of your directive.

I endet up in a state-defintion like that:

// base-state definition....

.state('base.child', {
    template: 'base.child.html'
});

base.child.html looks like this:

<ion-view>
    <ion-content>
        <child-directive></child-directive> <!-- adds the content of the view -->
    </ion-content>
</ion-view>