Nested views in 1.0.1

ionic-v1
1

Hello,
Just trying to re-gig an app to have some nested views under 1.0.1 but seem to be struggling to get it to work correctly when called from the side menu.

I found this code pen that illustrates what I want but for ionic 0.9.24 http://codepen.io/yrezgui/pen/mycxB

So when I click on the Home1 sidemenu I want to have a back menu showing home ?

I also want the menu-toggle icon shown on home, check-in, and attendees but not under home1 and home2

2

I have ported the ionic 0.9.24 example to 1.0.1 :-

It works apart from the side menu “Home1” and “Home2” selection does not have a back menu allowing navigation back to home.

Any ideas how to get it to operate in the same manner as when “Home1” and “Home2” are selected from the main content area ?

3

The menu-close directive on the links is clearing the history stack, which prevents a back button from showing. It does a few other things such as close the sidemenu, and disable animation. If you removed this directive you could create your own function to call:

<ion-item href="#/event/home/home1" ng-click="closeMenu()" class="item">home 1</ion-item>

Then in the side menu controller:

.controller('MenuCtrl', function($scope, $ionicSideMenuDelegate, $ionicHistory) {
  $scope.closeMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
    $ionicHistory.nextViewOptions({
      disableAnimate: true
    });
  }
})

Here is a codepen example of this: http://codepen.io/brandyshea/pen/PqdOpe?editors=101

4

The Ionic framework uses the Angular UI router for handling routes and defining states. So, you should use ‘ui-sref’ in your templates (not ‘href’) and ‘$state.go()’ in your controllers.

For example:

 <a ui-sref="eventmenu.checkin" class="item" menu-close>Check-in</a>

See: Rob Ferguson).

5

Yes that looks like one of the issues and works nicely.

However I would like the Home page to always be the parent to Home1 and Home2.

This is not the case when you click on Check-In for example and the open the side menu again and click on Home1. At this point Check-In is thought to be the parent and not the main Home page.

6

Yes I had tried the ui-sref but with menu-close set the history gets cleared as brandyshea mentions.

If I remove the menu-close it does set the back button but as mentioned in my reply to brandyshea I would like the Home view to always be the parent of Home1 and Home2 i.e. children to Home.

With the ui-sref set and you click Check-in then Home1 the back button will be set to Check-in rather than home.

I was hoping the ui-router / ionic would have a mechanism to handle the Parent and Child relationship.

7

If you transition from a state ‘eventmenu.checkin’ to another state ‘eventmenu.home.home1’ then tap the ‘Back’ button, ui-router will take you back to the previous state ( ‘eventmenu.checkin’).

If you want to do something different then add a function to your controller that checks the current state and then takes you where you want to go:

  $scope.goHome = function () {
    if ($state.is('eventmenu.home.home1')) {
      $state.go('eventmenu.home');
    }
  };
8

Yes certainly, I’ll give it a test as well. Just need to make sure the Back Button title is correct, which is part of history stack (I think).

I was hoping there might be some ui-router and $ionicHistory magic that allowed specific parenting of views or made use of the state to figure out the return view.

I did have a play with adjusting the history stack which seems to work forcing the correct display of the title and return view i.e. state and url.

Be nice if there was a mechanism to insert a parent view possibly or for histories to take that into account.

9

-> Just need to make sure the Back Button title is correct, which is part of history stack (I think).

$ionicConfigProvider.backButton.icon('ion-ios-arrow-back');
$ionicConfigProvider.backButton.text('');  // default is 'Back'
$ionicConfigProvider.backButton.previousTitleText(false);

See: https://github.com/Robinyo/Vardyger/blob/master/core/client/app/scripts/app.js

-> I was hoping there might be some ui-router and $ionicHistory magic that allowed specific parenting of views or made use of the state to figure out the return view.

ui-router - Nested States and Nested Views: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states"