<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Navigation Templates</title>

    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>

    <!-- your app's js -->
    <script src="script.js"></script>
    <script src="controllers.js"></script>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
    
    <!-- Nested Master-Detail -->
    
    <script id="tpl-nested-base.html" type="text/ng-template">
      <ion-side-menus>
      
      	<!-- Side Menu -->
      
      	<ion-side-menu side="left" class="nested-menu">
      		<ion-nav-view name="side-view" animation="slide-left-right-ios7" ></ion-nav-view>
      	</ion-side-menu>
      
      	<!-- Main Content -->
      
      	<ion-pane ion-side-menu-content class="nested-menu-content">
      		<ion-nav-view name="content-view" animation="none"></ion-nav-view>
      	</ion-pane>
      
      </ion-side-menus>      
    </script>
    
    <script id="tpl-nested-menu.html" type="text/ng-template">
      
      <ion-view>
      	<ion-content>
      		<ion-list>
      			<ion-item nav-clear ui-sref="app.base.subMenu">Split Option 1</ion-item>
      			<ion-item nav-clear ui-sref="app.base.subMenu">Split Option 2</ion-item>
      			<ion-item nav-clear ui-sref="app.base.subMenu">Split Option 3</ion-item>
      		</ion-list>
      	</ion-content>
      </ion-view>

    </script>
    
    
    <script id="tpl-nested-subMenu.html" type="text/ng-template">
      
      <ion-view>
      	<ion-nav-buttons side="left">
      		<button class="button button-clear" ui-sref="app.base.content"></button>
      	</ion-nav-buttons>
      
      	<ion-content>
            <ion-list>
              <ion-item>Split Sub Option 1</ion-item>
              <ion-item>Split Sub Option 2</ion-item>
              <ion-item>Split Sub Option 3</ion-item>
              <ion-item>Split Sub Option 4</ion-item>
              <ion-item>Split Sub Option 5</ion-item>
            </ion-list>
      	</ion-content>
      </ion-view>      

    </script>

    <script id="tpl-nested-mainView.html" type="text/ng-template">
      
      <ion-view>
      	<ion-content padding="true">
      		<h1>Split Pane</h1>
      		<p>This is a split pane view nested within a left submenu</p>
      	</ion-content>
      </ion-view>      
      
    </script>
    

    <!-- Nested Tabs Master-Detail -->

    <script id="tpl-nestedtabs-base.html" type="text/ng-template">
      <ion-nav-view>
      	<ion-side-menus>
      
      		<!-- Side Menu -->
      		<ion-side-menu side="left" class="tab-nested-menu">
      			<ion-nav-view name="tab-side-view" animation="slide-left-right-ios7" ></ion-nav-view>
      		</ion-side-menu>
      
      		<!-- Main Content -->
      		<ion-pane ion-side-menu-content class="tab-nested-menu-content">
      			<ion-nav-view name="tab-content-view" animation="none"></ion-nav-view>
      		</ion-pane>
      
      	</ion-side-menus>
      </ion-nav-view>
    </script>
    
    <!-- -->
    
    <script id="tpl-nestedtabs-menu.html" type="text/ng-template">
      <ion-view>
      	<ion-content>
      		<ion-list>
      			<ion-item nav-clear ui-sref="app.tabs.one.videoSubMenu">Tabs Nested Link 1</ion-item>
      			<ion-item nav-clear ui-sref="app.tabs.one.videoSubMenu">Tabs Nested Link 2</ion-item>
      			<ion-item nav-clear ui-sref="app.tabs.one.videoSubMenu">Tabs Nested Link 3</ion-item>
      		</ion-list>
      	</ion-content>
      </ion-view> 
    </script>
    
    <!-- -->
    
    <script id="tpl-nestedtabs-subMenu.html" type="text/ng-template">

      <ion-view>
      	<ion-nav-buttons side="left">
      		<button class="button button-clear" ui-sref="app.tabs.one.tabcontent"></button>
      	</ion-nav-buttons>
      
      	<ion-content>
            <ion-list>
              <ion-item>Tabs Nested Sub 1</ion-item>
              <ion-item>Tabs Nested Sub 2</ion-item>
              <ion-item>Tabs Nested Sub 3</ion-item>
              <ion-item>Tabs Nested Sub 4</ion-item>
              <ion-item>Tabs Nested Sub 5</ion-item>
            </ion-list>
      	</ion-content>
      </ion-view>
      
    </script>
    
    <!-- -->
    
    <script id="tpl-nestedtabs-mainView.html" type="text/ng-template">
      
      <ion-view>
      	<ion-content padding="true">
      		 <h1>Tab 1</h1>
      		 <p>This is a split pane view nested within tabs, nested within a left submenu</p>
      	</ion-content>
      </ion-view>
            
    </script>

    <script id="tpl-nestedtabs-tabs.html" type="text/ng-template">
      
      <ion-tabs class="tabs-icon-top tabs-color-active-positive">
      
        <ion-tab title="Tab One" nav-clear icon-off="ion-android-checkbox-outline-blank" icon-on="ion-android-checkbox-blank" ui-sref="app.tabs.one.tabcontent">
          <ion-nav-view name="tab-one"></ion-nav-view>
        </ion-tab>
      
        <ion-tab title="Tab Two" nav-clear icon-off="ion-android-checkbox-outline-blank" icon-on="ion-android-checkbox-blank" ui-sref="app.tabs.two">
          <ion-nav-view name="tab-two"></ion-nav-view>
        </ion-tab>
      
        <ion-tab title="Tab Three" nav-clear icon-off="ion-android-checkbox-outline-blank" icon-on="ion-android-checkbox-blank" ui-sref="app.tabs.three">
          <ion-nav-view name="tab-three"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
      
    </script>
    
    <script id="tpl-nestedtabs-tab1.html" type="text/ng-template">
      
      <ion-side-menus>
      
      	<!-- Side Menu -->
      
      	<ion-side-menu side="left" class="tab-nested-menu">
      		<ion-nav-bar type="bar-negative" animation="nav-title-slide-ios7"></ion-nav-bar>
      		<ion-nav-view name="tab-side-view" animation="slide-left-right-ios7" ></ion-nav-view>
      	</ion-side-menu>
      
      
      	<!-- Main Content -->
      
      	<ion-pane ion-side-menu-content class="tab-nested-menu-content">
      		<ion-nav-bar type="bar-positive"></ion-nav-bar>
      		<ion-nav-view name="tab-content-view" animation="none"></ion-nav-view>
      	</ion-pane>
      
      </ion-side-menus>

    </script>
    <script id="tpl-nestedtabs-tab2.html" type="text/ng-template">
      
      <ion-view view-title="Tab2">
        <ion-content padding="true">
          <h1>Tab 2</h1>
          <p>Tab 2 doesn't have any form of subnavigation, just a straightforward old tab</p>
        </ion-content>
      </ion-view>
      
    </script>
    <script id="tpl-nestedtabs-tab3.html" type="text/ng-template">
      
      <ion-view view-title="Tab3">
        <ion-content padding="true">
          <h1>Tab 3</h1>
          <p>And Tab 3 is really just here to keep Tab 2 company</p>
        </ion-content>
      </ion-view>
      
    </script>

    <script id="tpl-detail.html" type="text/ng-template">
      
      <ion-view view-title="Detail">
        <ion-content padding="true">
          <h1>Detail</h1>
        </ion-content>
      </ion-view>
      
      
    </script>
    <script id="tpl-master.html" type="text/ng-template">
      
      <ion-view view-title="Master">
        <ion-content>
          <ion-list>
            <ion-item ng-repeat="item in items" href="#/app/master/{{item.id}}">
              {{item.label}}
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-view>
      
      
    </script>
    <script id="tpl-menu.html" type="text/ng-template">
      <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
          <ion-nav-bar class="bar-stable">
            <ion-nav-back-button>
            </ion-nav-back-button>
      
            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
              </button>
            </ion-nav-buttons>
          </ion-nav-bar>
          <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>
      
        <ion-side-menu side="left">
          <ion-header-bar class="bar-stable">
            <h1 class="title">Menu</h1>
          </ion-header-bar>
          <ion-content>
            <ion-list>
              <ion-item nav-clear menu-close href="#/app/page">Page</ion-item>
              <ion-item nav-clear menu-close ng-click="showModal()">Modal</ion-item>
              <ion-item nav-clear menu-close href="#/app/tabs/one/tabcontent">Tabs (with Split)</ion-item>
              <ion-item nav-clear menu-close href="#/app/master">Full Width Master Detail</ion-item>
              <ion-item nav-clear menu-close href="#/app/base/content">Split</ion-item>
            </ion-list>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>
    </script>

    <script id="tpl-modal.html" type="text/ng-template">
      
      <ion-modal-view>
      
        <ion-header-bar>
          <h1 class="title">Modal</h1>
          <div class="buttons">
            <button class="button button-clear" ng-click="closeModal()">Close</button>
          </div>
        </ion-header-bar>

        <ion-content padding="true"></ion-content>
      
      </ion-modal-view>

    </script>

    <script id="tpl-page.html" type="text/ng-template">
      
      <ion-view view-title="Page">
        <ion-content padding="true">
          <h1>Page</h1>
          <p>This is a standard page, accessed from the left menu. Nothing fancy to see here.</p>
        </ion-content>
      </ion-view>
      
    </script>

  </body>
</html>
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) {

  $ionicConfigProvider.views.maxCache(0);

  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "tpl-menu.html",
    controller: 'appController'
  })

  .state('app.page', {
    url: "/page",
    views: {
      'menuContent': {
        templateUrl: "tpl-page.html"
      }
    }
  })

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "tpl-nestedtabs-tabs.html"
      }
    }
  })

  .state('app.tabs.one', {
    url: "/one",
    views: { 
      'tab-one': {
        templateUrl: "tpl-nestedtabs-base.html"    
      } 
    }
  })

  .state('app.tabs.one.tabcontent', {
    url: '/tabcontent',
    views: {

      // Side Menu
      'tab-side-view': {
        templateUrl: 'tpl-nestedtabs-menu.html'
      },

      // Main Content
      'tab-content-view': {
        templateUrl: 'tpl-nestedtabs-mainView.html'
      }
    }
  })

  // Sub Menu
  .state('app.tabs.one.videoSubMenu', {
    url: '/tabcontent/videoSubMenu',
    views: {
      'tab-side-view': {
        templateUrl: 'tpl-nestedtabs-subMenu.html'
      }
    }
  })

  .state('app.tabs.two', {
    url: "/two",
    views: {
      'tab-two': {
        templateUrl: "tpl-nestedtabs-tab2.html"
      }
    }
  })

  .state('app.tabs.three', {
    url: "/three",
    views: {
      'tab-three': {
        templateUrl: "tpl-nestedtabs-tab3.html"
      }
    }
  })

    .state('app.base', {
      url: "/base",
      views: { 
        'menuContent': {
          templateUrl: "tpl-nested-base.html"    
        } 
      }
    })

    // the pet tab has its own child nav-view and history
    .state('app.base.content', {
      url: '/content',
      views: {

        // Side Menu
        'side-view': {
          templateUrl: 'tpl-nested-menu.html'
        },

        // Main Content
        'content-view': {
          templateUrl: 'tpl-nested-mainView.html'
        }

      }
    })

    // Sub Menu
    .state('app.base.subMenu', {
      url: '/content/subMenu',
      views: {
        'side-view': {
          templateUrl: 'tpl-nested-subMenu.html'
        }
      }
    })

    .state('app.master', {
      url: "/master",
      views: {
        'menuContent': {
          templateUrl: "tpl-master.html",
          controller: 'masterController'
        }
      }
    })

  .state('app.detail', {
    url: "/master/:itemId",
    views: {
      'menuContent': {
        templateUrl: "tpl-detail.html",
        controller: 'detailController'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/page');
});
@media (min-width: 767px) {

    .nested-menu-content,
    .tab-nested-menu-content {
        -webkit-transform: translate3d(270px, 0px, 0px) !important;
        width: calc(100% - 270px) !important;
    }

    .nested-menu,
    .nested-menu-content {
        z-index: 2 !important;
        box-shadow: -1px 0 2px rgba(0, 0, 0, .2), 1px 0 2px rgba(0, 0, 0, .2);
    }

}
Nested Views
=====================

I'm having a problem with some nested views, which appears to be affecting the navigation controllers and history navigation around tab controllers in particular.

The Plunker consists of 5 main screens, accessible from the slide in menu on the left hand side.

* **Page** - A basic page. Nothing fancy.
* **Modal** - A Modal popup. Again, nothing fancy.
* **Full Width Master Detail** - A relatively basic Master/Detail view, taking the full viewport
* **Split** - A split view, with a second level submenu
* **Tabs (with Split)** - Now we're getting a little trickier. This is a tabbed controller with three tabs, the first of which has a split view.

The main problem comes with the 'Tabs (with Split)' screen, where the navigation hierarchy appears to get confused, missing the Back button at times, displaying the wrong title etc. 

_Hopefully the issue is relatively straightforward, and is just around the way that the tab controller is nested._


## Tabs (with Split)

The Tabs (with Split) screen is where the first issue occurs. If you load the Plunker and navigate to Tabs (with Split) using the side menu. 

The initial view loads exactly as intended.

Then select Tabs Nested Link 1 from the split view menu, and the submenu slides into place. *At this point the page title for Tab 1 is set to 'Page' even though no such title is set in the template* (Problem 1)

You can now navigate between the top level menu (Tabs Nested Link 1, Tabs Nested Link 2 etc) at will and all behaves as expected.

From the footer, choose Tab Two. This now loads and again works as intended.

If you now return to Tab One, the navigation breaks. If you choose Tabs Nested Link 1 to navigate to the submenu, the side menu burger icon vanishes. (Problem 2) The Title in the navigation bar now reads 'Tab2'. (Problem 3)

Interestingly, clicking where the Back link _should_ be navigates you back to the top level menu (Tabs Nested Link 1 etc) 

If you then click on Tabs Nested Link 1 a second time, the navigation appears to work correctly - a 'Back' option slides in to replace the burger menu. However, the navigation bar title is still set to Tab2, even though we are on Tab1. (Problem 3b)  Clicking the Back button returns you to the top level menu as expected.

This behaviour seems to alternate when navigating in and out of the top level menu - one time the burger button will disappear and no back option will replace it, the next time it will work correctly, the next time the burger button will disappear and no back option will replace it. (Problem 4)


## Split Pane

The Split Pane option in the side menu is a similar configuration to the Tabs (with Split) option, except it is not nested inside a Tab controller.

Navigating to this option, it all works as intended, with one exception - the navigation bar title will read Tab2 - or Tab3 if that is the one you have last visited in Tabs (with Split) - (Problem 5) 

angular.module('starter.controllers', [])



.controller('appController', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('tpl-modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.showModal = function() {
    $scope.modal.show();
  };

})

.controller('masterController', function($scope) {
  $scope.items = [
    { label: 'Item One', id: 1 },
    { label: 'Item Two', id: 2 },
    { label: 'Item Three', id: 3 },
    { label: 'Item Four', id: 4 },
    { label: 'Item Five', id: 5 },
    { label: 'Item Six', id: 6 }
  ];
})

.controller('detailController', function($scope, $stateParams) {
});