<!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></title>
<link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.14" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" />
<script data-require="ionic@1.0.0-beta.14" data-semver="1.0.0-beta.14" src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.start', {
url: "/start",
views: {
'menuContent' :{
templateUrl: "menu-start.html"
}
}
})
.state('app.item1', {
url: "/item1",
views: {
'menuContent' :{
templateUrl: "item1.html"
}
}
})
.state('app.item1-child', {
url: "/item1-child",
views: {
'menuContent' :{
templateUrl: "item1-child.html"
}
}
})
.state('app.item2', {
url: "/item2",
views: {
'menuContent' :{
templateUrl: "item2.html"
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/start');
});
I built this plunker to try to explain my doubt.
Basically, I want to click in the button "GO TO ITEM 2" in the "Item 1 - Child" page and go to the "Item 2" as if I had clicked in the side-menu.
Running as an ionic app this icon doesn't appear. (here appears)
The page "Item 2" doesn't have the burger-icon :(
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/item1">
Item 1
</ion-item>
<ion-item nav-clear menu-close href="#/app/item2">
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $state, $ionicHistory) {
$scope.goToItem1Child = function() {
$state.go('app.item1-child');
}
$scope.goToItem2 = function() {
$ionicHistory.nextViewOptions({
historyRoot: true
});
$state.go('app.item2');
}
});
<ion-view title="Menu">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
</ion-content>
</ion-view>
<ion-view title="Item 1">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>Item 1</h1>
<button class="button button-assertive" ng-click="goToItem1Child()">GO TO ITEM 1 CHILD</button>
</ion-content>
</ion-view>
<ion-view title="Item 2">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>Item 2</h1>
</ion-content>
</ion-view>
<ion-view view-title="Item 1 - Child">
<ion-content>
<h1>Item 1 - Child</h1>
<button class="button button-assertive" ng-click="goToItem2()">GO TO ITEM 2</button>
</ion-content>
</ion-view>