I am building a project with ionic where there are different views handled by ui-router, that needs be nested together. This is the part of the code where the states of the ui-view are handled:
$stateProvider
// setup an abstract state for the tabs directive
.state('filters', {
url: '/filters',
abstract: true,
templateUrl: 'templates/filters.html'
})
// and one for the search bar
.state('search', {
url: '/search',
abstract: true,
templateUrl: 'templates/search.html'
})
// Each tab has its own nav history stack:
.state('filters.search.locations', {
url: '/locations',
views: {
'tab-locations': {
templateUrl: 'templates/tab-locations.html',
controller: 'LocationsCtrl'
}
}
})
.state('filters.search.job-categories', {
url: '/job-categories',
views: {
'tab-job-categories': {
templateUrl: 'templates/tab-job-categories.html',
controller: 'JobCategoriesCtrl'
}
}
})
.state('filters.search.levels', {
url: '/levels',
views: {
'tab-levels': {
templateUrl: 'templates/tab-levels.html',
controller: 'LevelsCtrl'
}
}
});
As you can see, my intention is to combine the states filters & search and display them together, but apparently I am doing something wrong. Do you know what is the issue with my code?
Thanks in advance for your replies!!
Check this out:
$stateProvider
.state('filters', {
url: '/filters',
abstract: true,
templateUrl: 'templates/filters.html'
})
// note this ...
.state('filters.search', {
url: '/search',
abstract: true,
templateUrl: 'templates/search.html'
})
.state('filters.search.locations', {
url: '/locations',
views: {
'tab-locations': {
templateUrl: 'templates/tab-locations.html',
controller: 'LocationsCtrl'
}
}
})
//and so on ...
Related
When I navigating from home page to another, back button not displaying at the navigation bar. However, there are certain case where ionic display the back button. e.g navigate Settings page form profile page back button display properly and mobile bank button also working fine.
The Goal is user have to go to home page when press mobile hardware back button with display back button on navigation bar and on home page display confirmation when press hardware back button.
I have already searched lots of Q&A over stack but nothing found proper solutions for this.
Here is my code that try to -
.run(function($ionicPlatform, $rootScope, $ionicLoading, $ionicPopup, $ionicHistory, $localStorage, $timeout, $http, $state) {
$ionicPlatform.ready(function() {
$ionicPlatform.registerBackButtonAction(function(event) {
if ($state.current.name=="app.home") {
$ionicPopup.confirm({
title: 'System',
template: 'are you sure you want to exit?'
}).then(function(res) {
if (res) {
ionic.Platform.exitApp();
}
})
}
}, 101);
});
})
How can I force Ionic to display back button on certain page?
.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('app.settings', {
cache:false,
url: '/settings',
views: {
'menuContent': {
templateUrl: 'templates/setting/settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('app.wfhadd', {
cache:false,
url: '/wfh/wfhadd',
views: {
'menuContent': {
templateUrl: 'templates/wfh/addwfh.html',
controller: 'AddWfhCtrl'
}
}
})
.state('app.wfhlist', {
cache:false,
url: '/wfh/wfhlist',
views: {
'menuContent': {
templateUrl: 'templates/wfh/wfhlist.html',
controller: 'listWfhCtrl'
}
}
})
.state('app.login', {
cache: false,
url: '/login/:userid/:logpass',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl',
params: {'userid': null, 'logpass': null}
}
}
})
.state('app.profile', {
cache: false,
url: '/settings/profile',
views: {
'menuContent': {
templateUrl: 'templates/setting/profile.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.activities', {
cache: false,
url: '/activities',
views: {
'menuContent': {
templateUrl: 'templates/activities.html',
controller: 'ProfileCtrl'
}
}
})
.state('app.leave', {
cache: false,
url: '/leave',
views: {
'menuContent': {
templateUrl: 'templates/leave/leave.html',
}
}
})
.state('app.leavelist', {
cache: false,
url: '/leave/allleaves/:id',
views: {
'menuContent': {
templateUrl: 'templates/leave/leavelist.html',
controller: 'LeaveCtrl',
params: {'leaveid': null}
}
}
})
.state('app.leavedtls', {
cache: false,
url: '/leave/details',
views: {
'menuContent': {
templateUrl: 'templates/leave/leavedtls.html',
controller: 'LeaveDtlsCtrl'
}
}
})
.state('app.leaveapply', {
cache: false,
url: '/leave/apply',
views: {
'menuContent': {
templateUrl: 'templates/leave/leaveapply.html',
controller: 'LeaveApplyCtrl'
}
}
})
.state('app.terms', {
url: '/settings/terms',
views: {
'menuContent': {
templateUrl: 'templates/policy.html'
}
}
})
.state('app.about', {
url: '/settings/about',
views: {
'menuContent': {
templateUrl: 'templates/about.html'
}
}
})
;
$urlRouterProvider.otherwise('/app/home');
})
EDIT 1
Now I have put following code on profile controller and back button show on Profile page but It's not working (not go back to home page).
.controller('ProfileCtrl', function($scope,$rootScope, $ionicHistory, $http,$localStorage, $ionicNavBarDelegate){
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
I am working on an app that I am building from the ionic framework.
I have a three tabbed view.
list
filter
tab3
The scenario is for the first time when I go to list state from filter state and then I select one item from the list and go the list detail page and I click on the back button from detail, this time I go back to list page but the list reloads means the state reloads.
But If I do this for the second time the list doesn't reload and the state cache has been saved properly.
It only happens for the first time. I don't know what could be the reason can anyone help me with this?
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html',
controller: 'AppCtrl'
})
.state('app.parentTab', {
url: '/parent',
cache: true,
views: {
'menuContent': {
templateUrl: 'parent.html',
controller: 'parentCtrl'
}
}
})
.state('app.parentTab.list', {
url: '/list',
cache: true,
views: {
'search-units': {
templateUrl: "list.html",
controller: 'listCtrl'
}
},
})
.state('app.parentTab.listFilter', {
url: '/listFilter',
authRequired: false,
cache: true,
views: {
'search-filter': {
templateUrl: "filter.html",
controller: 'filterCtrl'
}
},
})
.state('app.parentTab.tab3', {
url: '/tab3',
cache: false,
views: {
'search-map': {
templateUrl: "tab3.html",
controller: 'tab3Ctrl'
}
},
})
.state('app.detail', {
url: '/detail',
cache: false,
views: {
'menuContent': {
templateUrl: "details.html",
controller: 'detailsCtrl'
}
},
})
I have a problem with ionic and ui-routing, when I go in a child state the url is updated but the view remains the same.
this is my routing.js
.config(function($stateProvider, $urlRouterProvider, $locationProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "menu.html",
controller: "menuCtrl"
})
.state('app.home', {
url: "home",
cache: false,
views: {
'menuContent': {
templateUrl: "home.html",
controller: "homeCtrl"
}
}
})
.state('app.search', {
url: "search",
views: {
'menuContent': {
templateUrl: "search.html",
controller: "searchCtrl"
}
}
})
.state('app.search.product', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "productPage.html",
controller: "singleProductCtrl"
}
}
})
.state('app.search.product.market', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "market.html",,
controller: "marketCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
in this example when I try to go in app.search.product the view doesn't change, even if I go there directly inserting the right url in the browser. I've also tryed with ui-sref-opts="{reload: true} option but nothing change.
Here's a plunker that shows the problem (after search the view doesn't change) https://plnkr.co/edit/JrNFkV50klZItOQS18Iu
I don't have experience with Ionic, but based on the ui-router config angular expects a nested view, but your page has only single view. Meaning, the second level (product) has no view to load into. Since Ionic I suppose doesn't allow nested ionic views (would be funny if it did) you can use normal ui-view as nested one.
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
<a ui-sref=".product({id: 1})">Go to product</a>
<ui-view name="secondLevel"></ui-view>
</ion-content>
Check your code with modifications here: https://plnkr.co/edit/LdgmoAEo1pS9spi1Su1z.
Not sure if this is what you were looking for. Based on your plunkr it looks like you've defined nested view accidentally. In which case solution would be to remove .search from *.product state names: https://plnkr.co/edit/PGICsBhzyCOTSe9af4yu
.state('app.product', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "productPage.html"
}
}
})
.state('app.market', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "market.html"
}
}
});
Use this configuration:
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "menu.html",
})
.state('app.home', {
url: "home",
views: {
'menuContent': {
templateUrl: "home.html"
}
}
})
.state('app.search', {
url: "search",
views: {
'menuContent': {
templateUrl: "search.html"
}
}
})
.state('app.product', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "productPage.html"
}
}
})
.state('app.market', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "market.html"
}
}
});
When you declare 'app.search.product' by example, this means that in the template of the search state (search.html) should be have a view for load the children state, and this it's not the case, your views has been moving in the same "level"
try to put in ui-sref name of the product state in Go To product link tag.
that is ui-sref="app.product"
I use ui-router.
Here are my nested states:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
How can I set books.new state to be default child of the books abstract state, so then when you hit /books ui-router redirects to /books/new?
There is a working example
We can use built in features. 1) default is such child state which has empty url:
$stateProvider
.state('books', {
abstract: true,
url: '/books/new',
controller: 'BooksCtrl',
..
})
.state('books.new', {
//url: '/new',
url: '',
...
})
.state('books.top', {
url: '^/books/top',
...
});
And 2) to keep /books in place, we can use redirection
$urlRouterProvider.when('/books', '/books/new');
And these links will work as expected:
// href
<a href="#/books">
<a href="#/books/new">
<a href="#/books/top">
//ui-sref
<a ui-sref="books.top">
<a ui-sref="books.new">
Check it here
Try this way:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '',
templateUrl: 'contents/books-new.html'
});
EDIT: I know that's not very nice, but you can create additional state with same arguments except url:
var booksArgs = {
url: '',
templateUrl: 'contents/books-new.html'
};
$stateProvider.state('books.new', booksArgs);
$stateProvider.state('books.new_', angular.extend({}, booksArgs, {
url: '/new'
}));
Another solution from this post:
In states configuration:
$stateProvider
.state('books', {
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html',
redirectTo: '.new'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
On module run:
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params, { relative: to });
}
});
}]);
I am developing a mobile app on ionic framework. It has a side menu with subcategories. Whenever I go to the subcategory more than once and click on the back button in android mobile, it retraces whole of the states it went through which I don't want.
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "templates/event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})
.state('categorymenu', {
url: "/category",
abstract: true,
templateUrl: "templates/event-menu.html"
})
.state('categorymenu.compound', {
url: "/compound",
views: {
'menuContent' :{
templateUrl: "templates/categories.html",
controller: "CategoriesCtrl"
}
}
})
.state('categorymenu.research', {
url: "/research",
views: {
'menuContent' :{
templateUrl: "templates/categories.html",
controller: "CategoriesCtrl"
}
}
})
.state('categorymenu.product', {
url: "/product",
views: {
'menuContent' :{
templateUrl: "templates/product.html",
controller: "CategoriesCtrl"
}
}
})
$urlRouterProvider.otherwise("/event/home");
})
I want the back button to redirect user to the home page. Here categorymenu.compound and categorymenu.research are the contents of sidemenu, which has got many subcategories that would redirect to categorymenu.product page.
redefine backbutton function on each controller loading, you can use :$ionicPlatform.registerBackButtonAction(function(){$state.go('targetView')}, priority, [actionId])
but you need clear cache when you reload views (for redefine backbutton each time and have SEVERAL possible return).
you can add param in each redirect :
$state.go('targetView',{cache: false});
or add param in state description
.state('eventmenu.home', {
cache: false
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})