Develop Reference

Remove navigation bar in sidemenu based template in Ionic/Angular JS

I created an application using the Ionic Framework and it works great. It is based on the sidemenu-template, so I always have a navigation bar on top of the application.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon-round" 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-content>
<a menu-close href="#/app/bla">
<div id="profile-item">
<i class="icon ion-card"></i> Bla
</div>
</a>
<a menu-close href="#/app/register">
<div id="profile-item">
<i class="icon ion-card"></i> Sign-up
</div>
</a>
<a menu-close href="#/app/login">
<div id="profile-item">
<i class="icon ion-card"></i> Login
</div>
</a>
</ion-content>
</ion-side-menu>
</ion-side-menus>
app.js:
$stateProvider.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$stateProvider.state('app.start', {
url: '/start',
views: {
'menuContent': {
templateUrl: 'templates/start.html',
controller: 'StartsCtrl'
}
}
})
Now for the registration and login view I don't want to show the navigation bar at all. How can I remove it on specific view? I find this hard because the nav-bar is defined in menu.html which is called before the views.

I had to modify the routes definition in app.js:
$stateProvider.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
$stateProvider.state('start', {
url: '/start',
templateUrl: 'templates/start.html',
controller: 'StartsCtrl'
})
Only removing the toogle button did not work, as the user was still able to swipe right on the screen to show the menu.

Simply hiding the menu-toggle button should do the trick for you.
Set a variable on the rootScope based on which you can show/hide the navigation bar toggle button:
<button ng-if="$root.isShowNav" class="button button-icon button-clear ion-navicon-round" menu-toggle="left">
Set this variable's value inside your app's .run:
.run(function($ionicPlatform, $rootScope) {
// $rootScope.isShowNav = true/false based on some condition.
}
For example, here you could do something like this:
.run(function($ionicPlatform, $rootScope) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState) {
if (toState.name !== "app.login" || toState.name !== "app.start") {
$rootScope.isShowNav = true;
}
else {
$rootScope.isShowNav = false;
}
}
}

Ionic left sidemenu does not toggle open

Hi I'm relatively new to ionic and I'm trying to get an app running with both a side-menu and a tab bar. Currently the tab bar is working fine just the left side menu does not open when I click the icon. For most of the app I've just been working off of the tutorials on the ionic website.
I am adding google maps to the tabs and I am aiming to have facebook login for the sidebar but the main issue is the tab isn't toggling.
app.js
$stateProvider
.state('menu', {
url: "/menu",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('menu.playlists', {
url: "/playlists",
views: {
'menu' :{
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
tab-map.html
<ion-view view-title="Safety First">
<ion-nav-buttons side="left" ng-controller="AppCtrl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content ng-controller="MapCtrl">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menu" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/about">
About
</ion-item>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is an image of the app's main page
When I click the submenu icon it does not toggle the submenu. The odd part is that If I navigate the app to http://localhost:8100/#/menu/playlists the toggling is fine.
Any suggestions on why nothing is really firing on the click? Perhaps its an issue of which controller is acting at the time?

You have to call the correct function. I'm assuming login() is located inside AppCtrl controller. Because of that, ng-click can't find the function, unless you tell it where it's located. Since AppCtrl is responsible for menu.html, you have to call it like this:
ng-click="this.login()"

ionic collection-repeat working navigation not working on click

I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.

Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>

Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})

Change top view from nested view AngularJS UI-Routing

i am kinda new to this UI-Routing concept, so i was wondering the following.
Is it possible to change a top view from within a nested one.
So we start at index and call Account state within that view i call the Account.login view by using:
<a ui-sref="Account.login"></a>
Now is it possible to call the Index state again from within Account.login view and how would one accomplish that.
.state('Home', {
url: "/",
templateUrl: "pages/Home.html",
})
.state('Account', {
url: "/profile",
templateUrl: "pages/Account.html"
})
.state('Account.login', {
url: "/login",
templateUrl: "pages/Account_Login.html"
})
.state('Account.register', {
url: "/register",
templateUrl: "pages/Account_Register.html"
})
Working with Ionic Framework.
Main Page:
<ion-header-bar align-title="center" class="custom_Header">
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon" style="background-color:#4D8693"></button>
</div>
<h1 class="title"><a ui-sref="Home" style="text-decoration: none"><img src="img/Header.png" /></a></h1>
<div class="buttons">
<button menu-toggle="right" class="button button-icon icon ion-gear-b" style="background-color:#4D8693"></button>
</div>
</ion-header-bar>
<ion-content class="has-header">
<ion-nav-view></ion-nav-view>
</ion-content>
Account.html:
<div class="has-header">
<a ui-sref="Home">
<img src="img/test.png" />
</a>
</div>
If i now press on that image on Account view, it will return me to my main page but without my buttons in the header, the image in the middle is still there.
Including: http://play.ionic.io/app/2f5cc1913037

$ionicHistory.backView has incorrect state when go to previous state manually

I did a small experiment: http://codepen.io/hawkphil/pen/NqMomm?editors=101
Here is my state flow (click on the buttons): Home -> Fact1 -> Fact2 -> Fact3 -> Fact2
On each state change, I am showing in console.log for $ionicHistory.backView
However, you can see in pen.js:64 line, weird things happen. The $ionicHistory.backView "thinks" that I got to app.fact2 from a back button, and it shows app.fact1 as the previous state (line pen.js:53). This is incorrect, right? It should show app.fact3 as the previous state because I got to app.fact2 state MANUALLY by clicking the button. I also showed the value from $timeout (line pen.js:59) just in case it's slow. But it's still incorrect.
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.home to: tabs.fact1
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.home
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.home
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.fact1 to: tabs.fact2
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.fact1
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.fact1
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.fact2 to: tabs.fact3
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.fact2
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.fact2
pen.js:56 stateChangeSuccess
pen.js:64 State change from: tabs.fact3 to: tabs.fact2
pen.js:52 $scope.$watch $ionicHistory.backView change detect. newVal:
pen.js:53 tabs.fact1
pen.js:58 $timeout after 2 sec $ionicHistory.backView().stateName
pen.js:59 tabs.fact1
QUESTION
How to correct this behavior? Maybe rewrite this delegate or override it somehow?
Is there a workaround? As I rely on the correct previous state in order to show/hide something.
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
controller: "MainCtrl"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.fact1', {
url: "/fact1",
views: {
'home-tab': {
templateUrl: "templates/fact1.html",
controller: 'Fact1TabCtrl'
}
}
})
.state('tabs.fact2', {
url: "/fact2",
views: {
'home-tab': {
templateUrl: "templates/fact2.html",
controller: 'Fact2TabCtrl'
}
}
})
.state('tabs.fact3', {
url: "/fact3",
views: {
'home-tab': {
templateUrl: "templates/fact3.html",
controller: 'Fact3TabCtrl'
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('MainCtrl', function($scope, $rootScope, $timeout, $ionicHistory) {
$scope.$watch(function() {
return $ionicHistory.backView() ? $ionicHistory.backView().stateName : null;
}, function (newVal, oldVal) {
console.log('$scope.$watch $ionicHistory.backView change detect. newVal:');
console.log(newVal);
});
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
console.log('stateChangeSuccess');
$timeout(function(){
console.log('$timeout after 2 sec $ionicHistory.backView().stateName');
console.log($ionicHistory.backView().stateName);
}, 2000);
});
})
.controller('HomeTabCtrl', function($scope, $rootScope) {
// console.log('Home');
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
console.log('State change from: ' + fromState.name + ' to: ' + toState.name);
});
})
.controller('Fact1TabCtrl', function($scope) {
// console.log('Fact1');
})
.controller('Fact2TabCtrl', function($scope) {
// console.log('Fact2');
})
.controller('Fact3TabCtrl', function($scope) {
// console.log('Fact3');
});
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Navigation Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-football" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
Fact1
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
Fact2
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
Fact3
</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/fact1.html" type="text/ng-template">
<ion-view view-title="Fact1">
<ion-content class="padding">
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
Fact1
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
Fact2
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
Fact3
</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/fact2.html" type="text/ng-template">
<ion-view view-title="Fact2">
<ion-content class="padding">
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
Fact1
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
Fact2
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
Fact3
</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/fact3.html" type="text/ng-template">
<ion-view view-title="Fact3">
<ion-content class="padding">
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact1">
Fact1
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact2">
Fact2
</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/fact3">
Fact3
</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
</body>
</html>

There are a lot of questions about history and navigation among the issues open on github.
I guess the navigation is broken and needs to be fixed.
$ionicHistory keeps track of the view pushing each visited view on a stack.
Actually there are 2 arrays there:
$ionicHistory.viewHistory().views
and
$ionicHistory.viewHistory().histories
I guess the first one is the history of views for the current stack while the second considers all the histories.
Different navigations can have different histories: tabs, sidemenu etc etc, and Ionic should remember each state when you switch from one history to the other.
Reading through their documentation you can find this:
Unlike a traditional browser environment, apps and webapps have
parallel independent histories, such as with tabs. Should a user
navigate few pages deep on one tab, and then switch to a new tab and
back, the back button relates not to the previous tab, but to the
previous pages visited within that tab.
You can find the currentHistoryId here: $ionicHistory.currentHistoryId().
I've changed your example a little bit displaying the 2 arrays when entering the view of the main controller:
.controller('MainCtrl', function($scope, $rootScope, $timeout, $ionicHistory) {
$scope.$on('$ionicView.enter', function(e) {
var history = $ionicHistory.viewHistory();
angular.forEach(history.views, function(view, index){
console.log('views: ' + view.stateName);
});
angular.forEach(history.histories[$ionicHistory.currentHistoryId()].stack, function(view, index){
console.log('history stack:' + view.stateName);
});
});
})
As you can see, the first array views keeps track of all the views you have visited.
If you go back and forth in doesn't add elements if you are displaying a view you've previously visited.
Each view has two properties: backViewId and forwardViewId. These 2 values seems to be part of the view when the elements are added to the collection. They don't change when you navigate.
So, what happens is when you follow the sequence:
Home -> Fact1 -> Fact2 -> Fact3 -> Fact2
Ionic finds the view Fact2 in the collection, gets it's backViewId (which points to Fact1) and that's what it will use as a view to go back to.
I didn't some debugging in the code and tried to force the back-view myself but things get messed up.
I guess they've chosen this path cause when you're back to the root - home - the back button should be hidden.
Things don't work as expected when you follow the sequence:
Another thing I've noticed is the fact that sometimes views are added to this collection even if the element is already there.
You can try the sequence:
Home -> Fact1 -> Fact2 - Home (button)
As you can see now the back button (in the header) tells you the back view is Fact2 and in fact the console shows the same:
views: tabs.home
views: tabs.fact1
views: tabs.fact2
views: tabs.home
history stack:tabs.home
history stack:tabs.fact1
history stack:tabs.fact2
history stack:tabs.home
For some strange reason this time a new view has been added to the collection and the regular pattern has changed.
There's a codepen here with some tests.

My solution/workaround:
Create an additional state to traverse to that references the same url, templateUrl, and controller.
For example if I have:
$stateProvider.state('fact2', {
url: '/fact2/:factFilter',
templateUrl: 'fact2.html',
controller: 'Fact2Ctrl'
})
Then I also create a "fact2" duplicate with only a different state name
$stateProvider.state('fact2_duplicate', {
url: '/fact2/:factFilter',
templateUrl: 'fact2.html',
controller: 'Fact2Ctrl'
})
If I am receiving the funny transition behavior, I can call $state.go('fact2_duplicate') and the history will be more inline to what I am expecting.
Hope this helps someone.