I searched about this topic, but i didn't find a solution for fixing the issue.
Basically I am building a app with login which has a nav icon also (like in bootstrap).
What i need to accomplish here is, i want to hide that particular button in the login page only. Index.html
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<!-- right -->
<button menu-toggle="right" class="button button-icon icon ion-navicon" ng-hide="isInLogin"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
controller.js
controller('LoginController',function($scope){
//$scope.isInLogin=true;
$scope.$on('$ionicView.enter',function(){
console.log("inLogin");
$scope.isInLogin=true;
});
});
I have tried like this also
controller('LoginController',function($scope){
$scope.isInLogin=true;
});
app.js
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller:'LoginController'
})
.state('tabs',{
url:'/tabs',
comtroller:'TabController',
templateUrl:'templates/tabs.html',
abstract:true
})
I am still in the learning level, any idea about how it can be achieved?
Related
<ion-nav-bar class="bar bar-header bar-dark bar-custom">
<ion-nav-back-button side="right"></ion-nav-back-button>
<ion-nav-buttons side="right" ng-if ="!$state.current.name==='Emaillogin'">
<button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
</ion-nav-bar>
Actually, I have placed popup button in my index.html page so that it must come up everywhere but I want to remove it from my login and signup page
i have checked it in button using ng-if but nothing happens
How to remove popup from both signup and login page !
Your ng-if statement
ng-if !="$state.current.name==='Emaillogin'"
is wrong. it should be like
ng-if="!($state.current.name==='Emaillogin')" or ng-if="$state.current.name!='Emaillogin'"
Two things are wrong here:
$state can not be used in html page, use $state.current.name in Controller.
Your if condition is not correct.
So your code should be like:
In controller:
$currentState = $state.current.name
and in html page:
<ion-nav-buttons side="right" ng-if ="currentState!='Emaillogin'">
<button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event)">
</button>
</ion-nav-buttons>
I am building a demo application on ionic framework. My demo ionic application has three states :
$stateProvider.state("app", {
abstract : true,
url : "/app",
templateUrl : "app/templates/theme.html"
});
$stateProvider.state("app.dashboard", {
url : "/dashboard",
views : {
"content" : {
templateUrl : "app/modules/dashboard/dashboard.html",
controller : "dashboardController"
},
"settings" : {
templateUrl : "app/templates/settings.html"
},
"menu": {
templateUrl: "app/templates/menu.html"
}
}
});
$stateProvider.state("app.demo", {
url : "/demo",
views : {
"content" : {
templateUrl : "app/modules/demo/demo.html",
controller : "demoController"
}
}
});
And theme.html looks like this :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content drag-content="true">
<ion-nav-bar class="bar-stable nav-title-slide-ios7 two-side" align-title="center">
<ion-nav-back-button class="button-clear inverse">
<i class="icon ion-ios7-arrow-back">
</i>< Back
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" id="menuBtn" class="button button-icon icon ion-navicon inverse"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" id="settingsBtn" class="button button-icon icon ion-gear-b inverse"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="content">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-nav-view name="menu" animation="slide-left-right"></ion-nav-view>
</ion-side-menu>
<ion-side-menu side="right">
<ion-nav-view name="settings" animation="slide-left-right"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
Issue is when I am going from app.dashboard to app.demo first time,
demoController is called. Then I go back to app.dashboard. And when
again going to app.demo state any number of times, demoController is
never called. app.demo view is cached. I don't know why.
In addition, I don't want to put cache-view=false or cache false in routing config because that disables the caching of that page totally(Forward & Backward). I want to reload page when I go in forward direction like app.dashboard to app.demo but not to reload page when I go in backward direction like app.demochild(For example) -> app.demo.
If I delete both ion-side-menu tag from my theme.html, the issue gets resolved, demoController is called every time when going in forward direction, But I want both ion-side-menu to be present in my theme.html
I have even disabled the forward caching.
$ionicConfigProvider.views.forwardCache(false);
Any help would be highly appreciated.
Ionic broadcast multiple things while changing a route, like'$ionicView.beforeEnter', '$ionicView.enter' etc.
write condition to check whether its in forward direction / backward direction and call $state.reload() accordingly in your broadcast handler
$scope.$on("$ionicView.beforeEnter", function(event, data){
if()//check for the direction backward / forward
{
$state.reload();
}
});
I am trying to accomplish both tabs and sliding side menu, but can't get back button appear after entering side menu item. I am new to Ionic/Angular Routing,but I am supposing that to make it work I need to manipulate with app.js and states.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon" ng-click="toggleRight()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-balanced">
<h1 class="title">MyApp</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item menu-close ui-sref="about">
About
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And my apps.js looks like this:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
(...tab states...)
.state('about', {
url: '/about',
templateUrl: 'templates/side/about.html',
controller: 'AboutController',
})
What should I do make back nav-button(or at least make some custom button on navigation bar to redirect home) appear when I am entering one of the side menu items and then template?
have you tried this?
$ionicNavBarDelegate.showBackButton(true);
$ionicNavBarDelegate api guide
You can include below code to enable back button.
< ion-side-menus enable-menu-with-back-views="true">
....
< /ion-side-menus>
http://ionicframework.com/docs/api/directive/ionSideMenus/
I can't seem to figure out how to get a back button to appear on a view that contains a ion-side-menus directive.
Here's the absolute simplest example I've come up with:
http://codepen.io/jsplaine/pen/YPxvXL?editors=101.
Note that the ion-views in state x.emptyView and state x.emptySideMenu are children of state x's ion-nav-view.
Here's a more in-depth example, where there exists a side-menu that is actually populated:
http://codepen.io/jsplaine/pen/ZYJRYW?editors=101
Here's the basic router, for the first codepen:
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's a second issue with the more in-depth codepen. Depending on which tab you click first, the 2nd or the 3rd, the corresponding template gets cached for future navigation to BOTH the 2nd and 3rd template. Click the 2nd one first, then the 3rd. Then start over and click the 3rd one first then the 2nd. The fact that this is happening makes me thinking that I'm using ui-router wrong somehow.
I also don't understand why I have to define ion-nav-view in both index.html AND in the abstract state ('x') template. Isn't state 'x' a child of index.html (the empty state)?
Can someone figure out how to modify both codepens so that the back button appears on views containing a ion-side-menus directive, and for the 2nd codepen .. the 2nd and 3rd tab caching issue is resolved?
The solution can be seen here:
http://codepen.io/jsplaine/pen/wBqNmw?editors=101
It seems that ion-side-menus' parent ion-view needs a child ion-nav-bar, and enable-menu-with-back-views must 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 the ionic directive/menuToggle docs state: https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1
### Button Hidden On Child Views
By default, the menu toggle button will only appear on a root
level side-menu page. Navigating in to child views will hide the menu-
toggle button. They can be made visible on child pages by setting the
enable-menu-with-back-views attribute of the {#link >ionic.directive:ionSideMenus}
directive to true.
I wonder if the authors didn't take your case into account. Their model is a slide-in menu that only slides in partially and can be toggled with a menu icon. So you may be a bit off paradigm but this seemed to work for me albeit a bit lame for duplicating the nav-bar code in the 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>
I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.
I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.
My set up is this...
tabs: tab.feed, tab.friends, tab.account
other view: randompage
Here is my route set up...
.state('randompage', {
url:'/randompage',
templateUrl: 'templates/randompage.html',
controller: 'RandomPageCtrl'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
.state('tab.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
Here is the tabs.html
<ion-tabs class="tabs-icon-top tabs-top">
<!-- Feed Tab -->
<ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
<!-- The rest are just from the tab skeleton -->
<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
Here is the tab-feed.html
<ion-view title="Feed">
<ion-nav-buttons side="right">
<a class="button button-icon ion-android-camera" href="#/randompage"></a>
</ion-nav-buttons>
<ion-content class="padding">
<h1>Feed</h1>
</ion-content>
</ion-view>
Here is the randompage.html
<ion-view title="Random Page">
<ion-content lass="padding">
</ion-content>
</ion-view>
Everything navigates and shows correctly except the back button is not showing.
Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.
Thanks!
This has been a long time problem for me as well. While the history stack is broken in this use case, 'backView' in the history object is correct. The full history object can be seen with this log line:
console.log( JSON.stringify($ionicHistory.viewHistory(), null, 4) );
My solution is to manually add in a Back button on global pages.
Global page html:
<ion-view view-title="Help">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button>
</ion-nav-buttons>
Javascript:
$scope.goBack = function() {
$ionicHistory.goBack();
};
Another alternative is to modify the ionic source. Replace enabledBack() in ionic.bundle.js with this:
enabledBack: function(view) {
//original code
//var backView = getBackView(view);
//return !!(backView && backView.historyId === view.historyId);
//new code to show back
var backView = viewHistory.backView;
return backView != null;
},
I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.
splash view --> tab view --> random page (out of tab)
|
tab1 --> nested view (in tab)
|
tab2 --> nested view (in tab)
root history stack:
splash view ---> random page
tab history stack:
tab view ---> tab1 --> nested view
---> tab2 --> nested view
I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.
<ion-view title="tabs">
<ion-content padding="false">
<ion-pane>
<ion-nav-view name="tab-content"></ion-nav-view>
</ion-pane>
<div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</ion-content>
</ion-view>
then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.
I am sorry I don't have enough reputation to add a comment.
Ryan's answer worked like a charm for me(not the modify ionic source part), I just want to add a point that if one uses
ng-click="$ionicGoBack()"
instead of
ng-click="goBack()"
the Javascript can be omitted.