I'm struggling with such a simple thing. I have a side menu in ionic. I want the post page to be a child view of the home page. But when I navigate to the post page from the home page, the back button is missing. Also I'm not sure how to define the navbar (index.html, menu.html or post.html).
Router:
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('menu.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl',
resolve: {authResolve: authResolve}
}
}
})
.state("post", {
url: "/home/:uid/:postId",
templateUrl: "templates/timeline/post.html",
controller: "PostCtrl as post",
resolve: {authResolve: authResolve}
})
index.html:
<body ng-app="starter" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar>
<ion-nav-back-button side="left" class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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>
post.html:
<ion-view>
<ion-nav-bar>
<ion-nav-back-button side="left" class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
the back button need to be only in the higher template (don't repeat it in the post.html). To activate the back button in post.html, the view need to be a child in menu.html template. To do that you post.html route need to be declare like :
.state("menu.post", {
url: "/post/:uid/:postId",
views:
'menuContent' :{
templateUrl: "templates/timeline/post.html",
controller: "PostCtrl as post",
resolve: {authResolve: authResolve}
}
})
See ionic example to understand better what happen.
Try changing .state('post') to .state('menu.post') to make post a sub of the menu.
Likewise, if post is a sub of home, you can chain it like menu.home.post.
Related
I am facing an issue with routing. The url changes to the expected one, but the template never loads, and there are no errors on the console. I am using Ionic 1 for my project.
Here is my routing configuration.
$stateProvider
.state('admin', {
url: "/admin",
views: {
'landing': {
templateUrl: "templates/admin/admin-login.html",
controller: 'AdminLoginController'
}
}
})
.state('adminapp', {
url: '/adminapp',
abstract: true,
views: {
'admin': {
templateUrl: "templates/admin/admin-main.html",
controller: 'AdminLoginController'
}
}
})
.state('adminapp.parking', {
url: "/adminparking",
views: {
'adminMenuContent': {
templateUrl: "templates/admin/admin-home.html",
controller: 'AdminHomeController'
}
}
})
And below is the snippet in index.html
<body ng-app="starter" class="starter">
<ion-nav-view name="landing"></ion-nav-view>
<ion-nav-view name="admin"></ion-nav-view>
</body>
And below is the admin-main.html
<ion-side-menus enable-menu-with-back-views="false" ng-init="initAdmin()">
<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="adminMenuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<div ng-include="'templates/admin/admin-menu-template.html'"></div>
</ion-side-menu>
</ion-side-menus>
I had to use two views since, the login page doesn't have a menu, and all other pages after login has menu, and as per some ionic forum posts I have to do it with two views.
The initial landing page url is /pg-admin/index.html#/admin. After login it navigates to pg-admin/index.html#/adminapp/adminparking.
When I select 'Logout' option from the Panel menu, I am navigating back to /pg-admin/index.html#/admin. But it never loads the login page, though the url is now changed. I am trying to navigate to login as below
$state.go('admin', {});
Navigation within the 'admin' view is working fine. For example if I navigate to
pg-admin/index.html#/adminapp/settings, this is working.
Anything wrong with the routing configuration? I guess there is something fishy around the abstract view.
I am working on a ionic framework app, where i need to hide only menu button on a specific template but need to keep back button.
it is showing like
My app.js
// setup an abstract state for the tabs directive
.state('app', {
url: '/app',
cache: false,
abstract: true,
templateUrl: 'templates/menu.html',
})
.state('app.home', {
url: '/home',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'DashCtrl'
}
}
})
.state('app.models', {
url: '/models',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/models.html',
controller: 'ModelCtrl'
}
}
})
.state('app.model', {
url: '/model/:Id',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/models-data.html',
controller: 'ModeldataCtrl'
}
}
})
.state('app.models-detail', {
url: '/models/:Id',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/single-model.html',
controller: 'ModelDetailCtrl'
}
}
})
.state('app.about', {
url: '/about',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/about.html',
controller: 'AboutCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
Menu html is:
<ion-side-menus enable-menu-with-back-views="true">
<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">Rolls</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/home">
Home
</ion-item>
<ion-item menu-close href="#/app/models">
Models
</ion-item>
<ion-item menu-close href="#/app/about">
About
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
single-model html page where i am getting both menu and back button code are : single-model.html
<ion-view view-title="{{models.title}}">
<ion-content class="padding" overflow-scroll="true">
<img ng-src="{{models.image}}" style="width: 64px; height: 64px">
<p>
{{models.subtitle}}
</p>
</ion-content>
</ion-view>
Model and single model controller code is :
.controller('ModeldataCtrl', function($rootScope,$scope,$ionicLoading,$timeout, $stateParams, Models) {
$rootScope.dataloarding();
Models.modeldata($stateParams.Id).success(function(result){
if(result.success =='1'){
$scope.modeldata = result.data;
$rootScope.hideloading();
}
})
.error(function(result)
{
$rootScope.hideloading();
$rootScope.showAlert("Internet Connection Error");
});
})
.controller('ModelDetailCtrl', function($rootScope,$scope,$ionicLoading,$timeout, $stateParams,$ionicSideMenuDelegate, Models) {
$ionicSideMenuDelegate.canDragContent(false);
$rootScope.dataloarding();
Models.singlemodel($stateParams.Id).success(function(result){
if(result.success =='1'){
$scope.models = result.data;
$rootScope.hideloading();
}
})
.error(function(result)
{
$rootScope.hideloading();
$rootScope.showAlert("Internet Connection Error");
});
})
i follow this and this but it remove both back button and menu both or back button only.
Is there any solution to remove only menu from single-model html page only ?
This worked for me:
<ion-view view-title="Register">
<!-- to remove sidemenu button -->
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
...
I just added a simple nav-bar. The sidemenu button is gone and I kept the back button.
You can try this, it works for me. Replace your side menu content with below code
<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>
Basically I am trying to transition from my root.home state to root.topic.section (a topic view with a nested section view). The view loads but my back button and view title do not appear. The view title stays the same as it was in root.home. I don't understand because when i use ui-sref to change to sibling state (with no child states) then it DOES change the title.
EDIT: When I navigate from root.home to a sibling page root.dbtest, dbtest created a new navbar element in the DOM with the correct title, and sets the home's navbar to 'cached'. But when I navigate from root.home to root.topic.section no new DOM element is created and home remains active.
EDIT 2 this is the 'ui-sref' i am using to link to the sub state from root.home.
<a ui-sref="root.topic.section({topicId: xxx, inStore: false, topicName: xxx, sectionType: SECTION_TYPE.Summary})">link</a>
.
$stateProvider
.state('root', {
url: '/root',
abstract: true,
templateUrl: 'templates/menu-static.html',
controller: 'MenuCtrl'
})
.state('root.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
.state('root.topic', {
url: '/topic/:topicId/{inStore}',
abstract: true,
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/topic-view.html',
controller: 'TopicCtrl'
}
},
params: {topicName: null}
})
.state('root.topic.section', {
url: '/section/:sectionType',
views: {
'sectionSpace': {
templateUrl: 'templates/topic-section-view.html',
controller: 'TopicSectionCtrl'
}
}
})
Here is a snippet from my menu-static.html
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</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>
<ion-nav-view name="menuContent">
</ion-nav-view>
</ion-side-menu-content>
Here is a snippet from home.html
<ion-view view-title="All Topics">
<ion-nav-title>All Topics</ion-nav-title>
<ion-content>
</ion-content>
</ion-view>
Here is a snippet from topic-view.html
<ion-view view-title="NOT SHOWING">
<ion-nav-title>NOT SHOWING</ion-nav-title>
<ion-content>
<ion-nav-view name="sectionSpace">
</ion-nav-view>
</ion-content>
</ion-view>
Also: the Url will currently be /root/topic/... This seems undesirable=> you can have root have the url: '', and this will allow the url to be /topic/
The above did not work well for me so I tried this personally and it did work for the Parent:
Topic-view.html
<ion-view view-title="NOT SHOWING">
<div class="tabs-striped tabs-top tabs-background-balanced tabs-color-light">
<div class="tabs">
<a ng-repeat='section in ["Section1", "Section2", "Section3"]' class="tab-item" ng-click='goTo(section.toLowerCase())'>
{{section}}
</a>
</div>
</div>
<ion-nav-view name='sectionSpace'></ion-nav-view>
</ion-view>
And it did work.
I'm not sure what this {inStore} is about but maybe that's for earlier versions of Ionic/Angular I think I got this working in this codepen: http://codepen.io/zargold/pen/qZNJNJ?editors=1011
I am trying to develop the navigation i ionic as follows
AppCtrl to Login or Menu
Then from Menu to Products or Orders or back to Login
My app.html like this
<ion-nav-view name="appContent">
</ion-nav-view>
My menu.html like this
<ion-view>
<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"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/products">
Products
</ion-item>
<ion-item nav-clear menu-close href="#/app/orders">
Orders
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
And my state configurations are like this
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/views/app.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'appContent': {
templateUrl: "app/views/login.html",
controller: 'LoginCtrl'
}
}
})
.state('app.menu', {
url: "/menu",
views: {
'appContent': {
templateUrl: "app/views/menu.html",
controller: 'MenuCtrl'
}
}
})
.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "app/views/products.html",
controller: 'ProductsCtrl'
}
}
})
.state('app.productdetail', {
url: "/projects/:productid",
views: {
'menuContent': {
templateUrl: "app/views/productdetail.html",
controller: 'ProductDetailCtrl'
}
}
});
In the AppCtrl I'am navigating to Login or Menu.
It navigates to menu.html succefully,
After that when I select the products or orders it is not further navigating.
I noticed the menuContent navigation view is hosted inside the appContent navigation view.
Is ionic supports this kind of hierarchical navigation?
Please find the codepen here code
When using these kind of hierarchical views, we need to specify under which state the view needs to be rendered. Changing the below line of code in your example, will load the Products page properly.
.state('app.products', {
url: "/products",
views: {
'menuContent#app.menu': {
templateUrl: "templates/products.html",
controller: 'ProductsCtrl'
}
}
});
Notice the change in the view name, menuContent#app.menu this would specify the router to render the products view under menu state. Read through more on this in original documentation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
I have set up my template pages and my routes. My page transition does not work when I change state to 'login' state, it just shows the page without transition. I don't know what the problem could be. My application's main page is index.html with an <ion-nav-view> element.
Here is my routing code:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/app/home');
})
menu.html: This page is the parent state. Other pages inherit from it.
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable" id="header" animation="slide-left-right">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
<img src="img/logo.png" alt="EasySpree" />
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-ios7-email">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-pane>
index.html: Main Page - route defined on this page
<ion-nav-view id="main" animation="slide-left-right-ios7"></ion-nav-view>
You have to put it in the animation="slide-left-right" in of your menu.html page.
E.g. menu.html:
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable" id="header" animation="slide-left-right">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
<img src="img/logo.png" alt="EasySpree" />
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-ios7-email">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
I have created a tool Ionic builder to build barebones for ionic app. This will build all needed pages and files, add transitions, tabs or side menus. You can generate the app and download the code. Please give it a try!
In my case, I was routing to another module -
So I was going from
/tabs/plan
to
/tabs/dinners/edit/123
Once I added the edit component to the routing of my plan module, the transitions worked. I did not need to duplicate the component itself - it is still in the dinner module.
E.g.:
/tabs/plan/edit/123