Start nav-bar from the second view of an app

I want to start displaying ion-nav-bar from the second page rather than displaying from first page. I don’t want to hide nav-bar after displaying it on the first page. Then second page has lot of child who wants nav-bar as default. How to implement this? Ideas are welcomed @leob, @bengtler Thanks!!

Well you can disable the title bar/navbar for a certain page like this:

  <ion-content has-header="false">

I suppose that would do what you want.

when I do that, I see a lag. I don’t want my app users to see that lag.

No I don’t understand that.

Lag, which lag, when you get that? Can’t understand this without the full context.

Header gets displayed when an app enters into a view. And later header gets washed-off if is present. I meant this as lag.

You can try any of following two options:

<div ng-hide="myValue" class="ng-hide"></div>

Any of these options should be done on the root element of the nav-bar

There’s another piece of advice that I can give, it is kind of similar to what @AlexJ said but a slightly different technique.

It relates to the difference between “ng-show” (or “ng-hide”) and “ng-if”.

What I’ve experienced is that, if you use “ng-show” to conditionally display an element based on the value of a $scope variable or function, I often see the element “flashing” briefly even though the variable or function is FALSE. Then after a fraction of a second the element becomes invisible.

(in the beginning I didn’t notice this because most of the time it’s visible only for a very short while, but when I started adding CSS animations I noticed it because I saw something moving).

Now, the trick is if I use “ng-if” instead of “ng-show” (or “ng-hide”) then this problem does not occur. So this would be my recommendation and would in most cases be an alternative to “ng-cloak”).

(other benefit is that “ng-if” is more efficient than “ng-show”/“ng-hide” because with ng-show the element is added to the DOM even if it’s not displayed, with “ng-if” it only gets added when it needs to be displayed - so for elements which are only displayed SOMETIMES but are invisible most of the time this would certainly be more efficient)

By the way, my theory is that this issue (the brief “flash” of elements that should be invisible) is somehow related to the view caching which Ionic does. Ionic caches the view to be able to display it quickly but a side effect of that is that when (re)displaying the view you may in some cases see the “old” version of the view before it gets updated.

Well anyway this is my advice. I notice that, the longer I am using Ionic, the more I am using “ng-if” instead of “ng-show”.

(on the other hand, it could be that @AlexJ also has a point when he says that you should use “ng-hide” instead of “ng-show” because of the fact that it works the other way around, but personally I have good experiences with using “ng-if”)

P.S. well, to be honest I’m not so sure anymore about the ngif/ng-show thing …

Hoewever what I do know is that (in my case) Ionic view caching has a lot to do with it.

So, what I am doing now to cope with the problem is using Ionic’s view lifecycle events like $scope.$on('$ionicView.beforeEnter' ...) and $scope.$on('$ionicView.beforeLeave' ...) to manage the $scope variables which are used in my “ng-if” or “ng-show” expressions, so that stuff has the proper value set when the view gets shown.

That being said you might want to give “ng-if” a try as a replacement for “ng-show”, it does have advantages in some situations.

Hi leob,

Friendly, I must correct some of your affirmations:

That’s totally the other way around. “ng-if” adds or removes the element to the DOM, and “ng-show/ng-hide” only add/remove a css rule “display: none;” to the element which is faster to compute by far. The same should happen using “ng-if”, you’ll need the ng-hide class to be in order to prevent visualization between browser reading and angularjs compialtion.

The only place where it comes in handy the use of “ng-if” is when you need a directive to be re-instantiated.

Here the clue is to add class=“ng-hide” to the element. It will be display: none; by default and will not be seen.

Hope it helps

Hi AlexJ, you’re probably right about both, however one nuance about the “efficiency” of ng-show versus ng-if:

I would maintain that ng-if is more efficient if you have a large block of HTML (large set of DOM elements) that you want to hide most of the time.

If this block of HTML/markup contains a (large) number of Angular expressions (with {{…}} so 2 way-binding expressions), then these expressions/would be executed in each digest cycle, even when the DOM element is hidden. Correct?

Second point is that showing/hiding parts of the DOM with “display:none” is indeed more efficient in terms of speed (i.e. it’s faster than adding to/removing from the DOM), however it may be less efficient in terms of memory (because your DOM tree gets larger even when you don’t need to display the element). Agree?

(not too argue with you for the sake of arguing but just to confirm my understanding of how this works)

So I think there are valid use cases for ng-show/ng-hide, and valid use cases for ng-if.

(but I think that in 90% of the cases the difference in speed or efficiency would be negligible/barely measurable)

However my original theory about substituting ng-if for ng-show (or ng-hide) to prevent the “flash” was indeed incorrect, as I found out myself.

My problem (I found out) was that I was setting scope variables in my controller when the view was displayed, however when leaving the view I left these variables “set” instead of clearing them, then when entering the view they would still be “set” for a short while before getting the proper value. I fixed this problem by using Ionic’s view lifecycle events (it would lead to far to go into the details of that).

Having said that, I agree that in most basic cases you’d probably go for ng-show/ng-hide and only use ng-if when there’s a good reason for it.

P.S. by the way, I’m struggling with another issue myself, which is how apparently the Ionic View caching mechanism is making my views show “old” content briefly before it gets updated.

I tried your suggestion with class = “ng-hide” but it’s not fixing the problem, I think the problem is more fundamentally caused by Ionic’s view caching … if I disable the view caching completely (by calling $ionicConfigProvider.views.maxCache(0)) then the problem goes away.

“ng-cloak” MIGHT help but I’ll do a search in the forum first if other people ran into this issue.

The nav-bar shows on an abstract view. You can use a non-abstract view to your first view. Something like:

    .state('login', {
        url: '/login',
        templateUrl: 'app/login/login.html',
        controller: 'LoginController'
    });

Now here your abstract view with the nav-bar

   .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "app/layout/menu.html",
        controller: 'MenuController'
    })

And its childs

    .state('app.card', {
        url: '/card',
        views: {
            'menuContent': {
                templateUrl: 'app/card/card.html',
                controller: 'CardController'            
        }
    })

I use this approach on my app.

Hope it helps you

1 Like

Ion-view has a attribute to disable the cache in a view

<ion-view cache-view="false">
1 Like

Hi @leob, you could be right about this. I’ve never ran a time test to this case but could be possible.

At last, looking at the answers it seems that it doesn’t solve the problem and it’s caching-related. Thanks for the info.

1 Like

For my “display” problem, disabling the view-caching for this view was the only solution. I tried for more than an hour with ng-if, ng-show, ng-hide etc etc (even tried “ng-cloak”) but when navigating to my view I kept seeing my “hidden” element for a fraction of a second before it (correctly) disappeared.

I’m sure that this is a side-effect of Ionic’s view caching and to me it looks like a bug. The old “cached” version of the view is showing for a fraction of a second before it’s updated, 2/10-ths of a second later. This happens EVEN when I set the element hidden through a scope variable in the “ionicView.beforeEnter” event.

This is especially annoying when the element had a CSS animation on it because then you can really see the animation and you can’t miss it. The ONLY way to prevent this annoying behavior was by completely disabling the caching for that view.

I cannot say for sure, but I bet the caching is keeping away the “ng-hide” class from the element since the second time it is entered, onwards.

Just out of curiosity, did the approach using $scope.$on('$ionicView.beforeEnter' ...) and $scope.$on('$ionicView.beforeLeave' ...) worked?

No, I tried that but it didn’t help … there was no way I could get rid of the “flash” no matter what I tried. Disabling the view caching was the only solution. The view caching is nice in most cases, but to me this looks like a bug, definitely.