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

**URL:** <https://forum.ionicframework.com/t/ion-view-view-title-not-working-using-ion-nav-view-to-render-custom-directives/29957>\
**Category:** ionic-v1\
**Created:** [August 5, 2015, 10:06pm UTC](https://forum.ionicframework.com/t/ion-view-view-title-not-working-using-ion-nav-view-to-render-custom-directives/29957 "2015-08-05T22:06:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adgoncalves](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adgoncalves/32/67247_2.png) [@adgoncalves](https://forum.ionicframework.com/u/adgoncalves)\
**Post date:** [August 5, 2015, 10:06pm UTC](https://forum.ionicframework.com/t/ion-view-view-title-not-working-using-ion-nav-view-to-render-custom-directives/29957/1 "2015-08-05T22:06:53Z")

</div>

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:

> **[Blank Starter](https://codepen.io/anon/pen/jPdaYG?editors=101)**
>
> A starting point for Ionic Demos Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Pull To Refresh: Nightly\](http://codepen.io/ionic/pen/mqolp/)....

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

Thks

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [August 6, 2015, 5:58am UTC](https://forum.ionicframework.com/t/ion-view-view-title-not-working-using-ion-nav-view-to-render-custom-directives/29957/2 "2015-08-06T05:58:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![charlieMACK](https://avatars.discourse-cdn.com/v4/letter/c/7c8e57/32.png) [@charlieMACK](https://forum.ionicframework.com/u/charlieMACK)\
**Post date:** [April 6, 2016, 6:34pm UTC](https://forum.ionicframework.com/t/ion-view-view-title-not-working-using-ion-nav-view-to-render-custom-directives/29957/3 "2016-04-06T18:34:39Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [April 7, 2016, 6:52am UTC](https://forum.ionicframework.com/t/ion-view-view-title-not-working-using-ion-nav-view-to-render-custom-directives/29957/4 "2016-04-07T06:52:22Z")

</div>

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:

```auto
// base-state definition....

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

```

base.child.html looks like this:

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

```