Navigating between multiple views within states

ionic-v1
1

Hi,

I’m creating an iPad app, that allows users to view PDF documents. The app has four tabs in one of the tabs the user can go from a list view into a details view and then finally into a read pdf view, in another tab they can go from a details view into a read PDF view. The problem I’m having is that the when I go into the read PDF view in the second tab (this tab shows all the downloaded PDFs) I get sent to the read PDF view in the first tab, which causes the back arrow not to appear.

I’ve created a tab for the downloads section, the first tab is the library view and the second tab is the downloads view.

        <ion-tab title="My Downloads" icon="ion-ios7-download" ui-sref="tabs.downloads">
            <ion-nav-view name="downloads-tab"></ion-nav-view>
        </ion-tab>

My app.js file that defines the routes has separate urls for both of the read PDF views. This is the routes for the view online PDFs:

.state(‘tabs.readfolder’, {
url: “/openfolder:id”,
views: {
‘home-tab’: {
templateUrl: “templates/files-and-folders-view.html”,
controller: “ReadFolderCtrl”
}
}
})

    .state('tabs.homeread', {
        url: "/read:IdTitle",
        views: {
            'home-tab': {
                templateUrl: "templates/read-document.html",
                controller: "ReadDocumentCtrl"
            }
        }

    })

Both of which are using the home-tab, these are the routes for the offline views:

.state(‘tabs.downloads’, {
url: “/MyDownloads”,
views: {
‘downloads-tab’: {
templateUrl: “templates/files-and-folders-view.html”,
controller: ‘MyDownloadsCtrl’
}
}
})

     .state('tabs.downloads.offlineread', {
         url: "/readoffline:IdTitle",
         views: {
             'downloads-tab': {
                 templateUrl: "templates/read-document.html",
                 controller: "ReadDocumentCtrl"
             }
         }

     })

Both are using the downloads-tab, the only thing in common with between the online view and the offline view is they use the same controller and template files, but the tab they load into should be different, but it’s not.

How can I get the offline view PDF route to load in the same downloads-tab and will this cause the back button to appear so the user can navigate back to their downloaded files.

Thanks

Stephen

2

Hi Stephen, I don’t think you posted all of the code for your tabs in this post.

It sounds a little like an issue I had myself - basically what I found it that each tab has it’s own navigation history, so on one tab you may have a back button, then go to another tab and unless you have drilled down into it, there will be no back, as there is no nave history for that tab.

3

Hi Kevin,

Yes it does sound like the same issue I’m having. I’ll read through your post and see if the fix/update you posted helps. If not I’ll add the rest of my code here to see if that helps show what the problem is.

Thanks

Stephen

4

Hi Kevin,

I have looked through your post on the issue you had, and it looks like named states solved the problem you had, but I am (as far as I can see) I am using named states, below is the full state provider I have for my application. As you can see I’m using named states:

$stateProvider

    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('selectHouse', {
        url: "/selecthouse",
        templateUrl: "templates/select-house.html"

    })

    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/day-list-view.html",
                controller: 'MonthViewCtrl'
            }
        }
    })

    .state('tabs.selectedday', {
        url: "/selectedday:date",
        views: {
            'home-tab': {
                templateUrl: "templates/files-and-folders-view.html",
                controller: "DayViewCtrl"
            }
        }
    })

    .state('tabs.home.readfolder', {
        url: "/openfolder:id",
        views: {
            'home-tab': {
                templateUrl: "templates/files-and-folders-view.html",
                controller: "ReadFolderCtrl"
            }
        }
    })

    .state('tabs.home.readdocument', {
        url: "/read:IdTitle",
        views: {
            'home-tab': {
                templateUrl: "templates/read-document.html",
                controller: "ReadDocumentCtrl"
            }
        }

    })

    .state('tabs.about', {
        url: "/about",
        views: {
            'about-tab': {
                templateUrl: "templates/about.html"
            }
        }
    })

    .state('tabs.search', {
        url: "/search",
        views: {
            'search-tab': {
                templateUrl: "templates/search.html",
                controller: "SearchCtrl"
            }
        }
    })

    .state('tabs.downloads', {
        url: "/MyDownloads",
        views: {
            'downloads-tab': {
                templateUrl: "templates/files-and-folders-view.html",
                controller: 'MyDownloadsCtrl'
            }
        }
    })

     .state('tabs.offlineread', {
         url: "/readoffline:IdTitle",
         views: {
             'downloads-tab': {
                 templateUrl: "templates/read-document-offline.html",
                 controller: "ReadDocumentCtrl"
             }
         }

     })


    .state('tabs.settings', {
        url: "/settings",
        views: {
            'contact-tab': {
                templateUrl: "templates/settings-view.html",
                controller: 'SettingsViewCtrl'
            }
        }
    });


$urlRouterProvider.otherwise("/tab/home");

I think the problem is caused in the state names clashing, but I can’t see how.

Stephen

5

I was wondering if you perhaps might have used the same name by mistake in the tabs HTML - you only show this one below, but not the other one you mention (if I understand your app, you have a tab to view the latest PDFs that are online, and another one to view locally cached ones? ) - I don’t know which this code is for, but check they have different named views

  <ion-tab title="My Downloads" icon="ion-ios7-download" ui-sref="tabs.downloads">
            <ion-nav-view name="downloads-tab"></ion-nav-view>
        </ion-tab>
6

Ah, here’s the template with the tabs:

    <ion-tabs class="tabs-icon-top tabs-dark">

        <ion-tab title="Library" icon="ion-ios7-home" ui-sref="tabs.home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="My Downloads" icon="ion-ios7-download" ui-sref="tabs.downloads">
            <ion-nav-view name="downloads-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Search" icon="ion-ios7-search" ui-sref="tabs.search">
            <ion-nav-view name="search-tab"></ion-nav-view>
        </ion-tab>


        <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about">
            <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Settings" icon="ion-ios7-settings" ui-sref="tabs.settings">
            <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

    </ion-tabs>

All have different names, I think.

7

I had a look at your HTML and routers and cannot see any obvious errors (I’m still learning myself)

What I did was to add a console.log into every controller to simply write out the conroller name - that helped me track what was going on.

Also, just one difference I see compared to my code, on the URLs where you pass parameters, I see you use url: "/selectedday:date", for example, I use a slash before the paramters, not sure if that may be the issue.

I also have a link in the comments in my code as shown below so I must have found that useful at the time

 .state('tab.newsdetail', { 
      url: '/newsdetail/:ID',
      views: {
        'news-tab': {
          templateUrl: 'templates/news-detail.html',
          controller: 'newsDetailCtrl'
         // http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/
        }
      }
    })
1 Like
8

Thanks for the help Kevin, I’ll try the things you suggested.

Stephen

9

Hi,

Just to let you know, I’ve fixed the problem. It was to do with the URLs and the passed parameters, as you suggested. I had the format wrong which was causing the routing to fail, but slightly. I’ve changed the URLs and all is working.

Thanks for the help Kevin.

Stephen

10

You are welcome!

I think what was happening was that because the router did not match a URL, it defaulted to the “otherwise” route.

11

Please send us your solution