Ionic / angular 1.3 - There is no ion-navigation feedback button when the internal menu

Question

I cannot figure out how to make the return button appear in a view containing a directive from the side of the ion.

Here is the simplest example I came up with: http://codepen.io/jsplaine/pen/YPxvXL?editors=101 .

Note that ion representations in x.emptyView state and x.emptySideMenu state are children of x ion-nav-view state x.

Here's a more detailed example where there is a side menu that is actually populated: http://codepen.io/jsplaine/pen/ZYJRYW?editors=101

Here is the main router for the first code:

angular.module('ionicApp', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('app', { url: "/", templateUrl: "templates/home.html", controller: 'AppCtrl' }) .state('x', { url: "/x", abstract: true, template: '<ion-nav-view animation="slide-left-right"/>' }) .state('x.emptyView', { url: "/empty-view", templateUrl: "templates/empty_view_only.html" }) .state('x.emptySideMenu', { url: "/empty-side-menu", templateUrl: "templates/empty_side_menu.html" }) }) 

There is another problem with a deeper codepen. Depending on which tab you click on the first, second or third, the corresponding template will be cached for future navigation on BOTH on the 2nd and 3rd templates. First click the second, then the third. Then start over and click on the third, then on the 2nd. The fact that this is happening makes me think that I'm somehow using u-router incorrectly.

I also don't understand why I should define ion-nav-view in both index.html AND and the abstract state template ('x'). Is "x" a child of index.html (empty state)?

Can anyone figure out how to change both codes so that the back button appears in views containing the directive on the ion side, and for the second code. Is the problem with caching of the 2nd and 3rd tabs resolved?

Answer 1

The solution can be seen here:

http://codepen.io/jsplaine/pen/wBqNmw?editors=101

It looks like the parent ion view of the ion-side menu requires a child ion-navigation bar, and the menu-resolution-from-back-view should be set to true.

 <!-- Side Menu Nav and Burger Defined --> <script id="templates/side_menu_with_nav.html" type="text/ng-template"> <ion-view view-title="Side Menu with Nav and Burger"> <ion-nav-bar></ion-nav-bar> <!-- HERE --> <ion-side-menus enable-menu-with-back-views="true"> <ion-side-menu-content> <ion-nav-bar> <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button> <ion-nav-buttons side="right"> <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button> </ion-nav-buttons> </ion-nav-bar> .... 

As stated in the "Ionic Directive / menuToggle docs" directive: https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1

• ### Button hidden in the view for children
• By default, the menu switch button is displayed only in the root directory
• page with additional level menu. Going to child views will hide the menu -
• toggle button. You can make them visible on child pages by setting
• enable-menu-with-back-views attribute {@link> ionic.directive: ionSideMenus}
• true directive.

Answer 2

I wonder if the authors do not take your case into account. Their model is a slide menu, which is partially shown only partially and can be switched using the menu icon. So you may be a bit of a paradigm, but this seems to work for me, albeit a bit lame for duplicating navigator code in a template.

 <script id="templates/empty_side_menu.html" type="text/ng-template"> <ion-view view-title="Empty side menu"> <ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-stable"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-side-menus> </ion-side-menus> </ion-view> </script>