Ion-nav-view inside ion-view

ionic-v1
1

I am using ionic framework since one year (1.0.11 beta). I recently upgraded to 1.1.0. I am seeing different issues (some was due to improvements in ionic). I guess my below problem is one like that.Can some one help me with this?

I am using ion-nav-view inside ion-view like below.This works fine till beta 11. Once I upgraded to ionic 1.1.0, I am unable to load ion-nav-view properly. I am seeing different UI issues like nav bar is not loading icons etc.

Can some one tell me how to load a different html view inside instead of using ? (or) are there any options?

<**ion-view** title="{{main.assignment.vehicleYear}} {{main.assignment.vehicleMake}} {{main.assignment.vehicleModel}}" ng-controller="workitemMain as main">
<ion-content class="has-headerx" scroll="false">
    <tab-slide-box active-tab="{{main.activeTab}}">
        <div class="tsb-icons">
            <div class="tsb-ic-wrp">
                <ion-scroll direction="x" class="tsb-hscroll">
                    <a href="javascript:;" class="ion-calendar"></a>
                    <a href="javascript:;" class="ion-document-text"></a>
                    <a href="javascript:;" class="ion-image"></a>
                    <a href="javascript:;" class="ion-chatbubbles" ng-show="main.enableMessaging"></a>
                </ion-scroll>
            </div>
        </div>

        <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
            <ion-slide>
                <**ion-nav-view** name="calendarView"></ion-nav-view>
            </ion-slide>
            <ion-slide>
                <**ion-nav-view** name="contactView"></ion-nav-view>
            </ion-slide>
            <ion-slide>
                <**ion-nav-view** name="docView"></ion-nav-view>
            </ion-slide>
            <ion-slide ng-if="main.enableMessaging">
                <**ion-nav-view** name="messageView"></ion-nav-view>
            </ion-slide>
        </ion-slide-box>
    </tab-slide-box>
</ion-content>
1 Like
2

I had a lot of problems trying to implement ion-view after one of the more recent Ionic updates and eventually decided to switch to ui-view:

It’s basically a more powerful version of AngularJS’s routeprovider in that you now have the flexibility to navigate between views using states and rather not having to worry about changes in the URL.

3

I think my problem is little different, i am using ion-nav-view inside ion-view. I guess with latest ionic framework, this wont work. I like to know, how to include different view (*.html) inside ion-slide and also how to update ion-nav-bar when there is change in slide. can some one help me with this?

4

So there’s a lot going on here and a lot of incorrect information.

Ionic uses UI-Router for it’s routing.
So ion-nav-view is like ui-view, but with some extra stuff on top.

@mrvamsidhar Ion-nav-view isn’t meant to be used like that. It’s purpose to create full screen containers that can render views and animate them in and out.
What you’re trying to do isn’t supported by ionic using ion-nav-views.

There are other ways you could do this kind of UI, but using ion-nav-view in side of your slides is not one of them.

5

@mhartington, thanks for your reply. At least now I know i am in wrong direction.

You mentioned there are other ways to do. Can you explain little more on this?
All I need to do is, I need to load different view (*.html) for each ion-slide. I also need to update header bar (like showing different icons based on the selected slide) based on current ion-slide. Header bar Icons are not updated on slide change. I tried ng-include, ng-view but didn’t worked. So basically I am having two problems

  1. How to load a different view on slide change.
  2. How to update header bar icons on slide change.

Can you provide some input on this?

6
  1. You can use ng-include instead of an actual view.
  2. Do you have a codepen/plunkr of what you’ve tried so far? Easier to work with an example. This could get you in the right direction.
    http://codepen.io/ionic/pen/AjgEB
7

Thanks for your reply. Here is the plunker which you requested. http://plnkr.co/edit/vE90bN?p=preview.

FYI: there are three views - view1.html, view2.html and view3.html. I am loading all these views in main.html.The problem here is on slide change my header bar is not getting updated with the icons related to current slide.

Thanks in advance.

8

@mhartington Would like to know what the extra stuff is. It took me about a day to try to get ion-nav-view working before I decided to give up and use the actual UI Router library instead. Would also like to know if some of the added features have compatibility issues.

9

Ionic does use UI-router for it’s routing…

Will work on a demo @mrvamsidhar

10

@mhartington, Thanks man. Appreciate your help on this.

11

@mhartington, any help on this?

12

You’re trying to use the tabs-slider? We don’t support that.

You can try this

13

@mhartington
The link http://codepen.io/mhartington/pen/pjyxaY?editors=100
you give does not solve the problem that the h3 header is missing in each view.

@mrvamsidhar Have you solved this problem?

14

Sorry for being silly , it’s only the css problem. Add some content before the h3 header will make it appear.