Beta 14 - Issues with Nav Bar

ionic-v1
1

Hey there,

I tried upgrading to Beta 14 this morning and am seeing a few issues. My app uses a sidebar, defined like this:

Whenever I try to navigate to one of my subviews, the title is not populated. Here’s an example of a subview:

Example screenshot: https://www.dropbox.com/s/ufqss9d8de8qba4/Screenshot%202014-12-16%2010.08.11.png?dl=0

If I navigate directly to that state, the title loads - and everything appears normally. I’ve tried enabling/disabling caching with no change - so that doesn’t appear to be the issue.

Another interesting note is that it appears to be rendering, but hidden - as seen here:

2

I’ ve similar structure of project to yours and I’ve the same problem. In my case appear neither nav-title nor nav-buttons.

3

Yep, saw your post. I pulled down the seed project and didn’t see any glaring differences between my HTML - so it has to be something about the way my states are configured? I have a main jumping off state that from there has child states, such as main.pick, main.receive, etc.

I’m overriding the “main” view, ala: <ion-nav-view name="main"></ion-nav-view> . Example being, my main.pick view.

.state('main.pick', {
    url: '/pick',
    views: {
        'main@': {
            controller: 'PickTicketsController',
            templateUrl: 'main/pick/pick.tpl.html'
        }
    }

I’m going to look at refactoring to avoid using that @ notation - as I think it may be causing the issue.

4

What is strange is fact, that in beta-13 everything was correct and after update problems appear. This is my DOM:

image
image.png1143×508 95.1 KB

5

I think there’s a definite issue when transitioning to child states, like pick.detail. I’m also noticing that a [nav-bar-transition="ios"] [nav-bar="cached"] class gets applied to the nav-bar.

If I disable the styles and toggle them, the navbar appears.

6

Hmm, well for that case, can you try using just view-title instead of ion-nav-title?

7

I’ve tried and nothing has changed.

8

I have tried both, same result. :smile:

9

I have the same issue. Neither nav-title nor nav-buttons appear.
I have try some solutions, but none of them have worked.

10

We’re talking with @dave in IRC right now. As soon as we find out whats up, we will post here :smile:

11

Yeah, it was a custom CSS issue. Rolled back all my custom styles and it works. Digging through my variables file right now to determine what it was.

12

I’ve prepared very simple codepen , which should visualize my situation. I’ve packed your all directives into my owns (to simplify and short html code). This example shows using of listView directive and the problems with ion-nav-buttons and view-title…
@mhartington could you tell me where have I made a mistake?

13

Any reason you have things inside of a directive?

Either way, it’s most likely due to the upgrade to angular 1.3

https://docs.angularjs.org/guide/migration#migrating-from-1-2-to-1-3

14

I have a lot of pages with very similar structures of HTML and behaviours, so I can pack this, reduce the lines of code and and allow to make logic changes in one place. I’ve familiarized myself with migration from 1.2 to 1.3 angular and I have found nothing, which could cause this situation. Moreover, example which I’ve prepared is very, very simple, it’s only package for some other directives (there’s no magic).

P.S. I’ve found that problem is with isolated scope.

1 Like
15

Good to hear. So everything’s working good then?

16

Unfortunately not yet. Now I only know that if I delete scope in directive then nav-buttons work. I’m searching any solution in angular documentation.
What is strange, it shouldn’t work that way, that only deleting scope in directive allow to show nav-buttons.

17

I had the same problem (nothing showing up in navbar). It was because I hadn’t imported the new transistions.scss in my ionic-custom.scss.

18

For me it was actually a customized variables.scss. We had just copied the whole thing and it’s missing some stuff.

19

Few keywords were a trigger for me. a ‘child state’ and ‘managing styles’. I’m not sure to create an issue, but there is a problem with beta.14. In fact I don’t know there this is ionic or angular…
In my directive I call $('#something').show() or .hide() with no effect, and new style applies ONLY after state is changed back to a parent. Seems like a DOM element is cached(!) in a child state. That’s impossible!
When I call this code in a browser console, it returns an element with the new style, but element inspector show a previous state of it! It’s very-very weird!
It is reproducible in different browsers!
Guys, please give se some idea which of new components (ionic, angular, ui-router, etc…) is responsible.
PS That’s why I’m always scared of batch updates of open source software.

UPD. It seems that the problem is on ui-router side. In case parent and child states reuse the same template, a child view appears invisible for jQuery. And all run-time changes go to the parent view DOM elements… It’s really unexpected

20

Has anyone found a sollution to this? I am having the same issue and can’t seem to get anything to show up in my nav bars.