I have an Ionic application that has 4 tabs menu and one of tabs is actual menu page that has some links of it's own, so quick snippet:
.state('menu', {
url: '/menu',
params: {user: null},
views: {
'tab-menu': {
templateUrl: 'menu.html',
controller: 'menuCtrl'
}
}
})
.state('user-profile', {
url: '/menu/profile',
params: {user: null},
views: {
'tab-menu': {
templateUrl: 'user-profile.html',
controller: 'menuCtrl'
}
}
})
So when user taps "Menu" Ionic tab, and then taps on profile page, everything works fine. Then user clicks "Home" tab and that also works fine. But after that, when user taps on "Menu" tab again it will go to profile page, and not to actual Menu page.
How do I make it go to menu page?
Solution to this problem as follows:
Tabs have ui-sref property:
ui-sref="main.live.tabs.ranking"
And this is causing the problem with redirection. Instead, just create controller with method
$scope.goToState = function () {
$state.go('state');
}
And modify tab by removing ui-sref and replacing it with
ng-click="goToState()"
Related
Is it possible to link from one tab to a nested view in another tab? I've tried two different methods and neither seem to work.
Here's my router config:
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
In templates/tab-dash.html I have a link to a particular chat detail page:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>My Chats</h1>
Chat #1
</ion-content>
</ion-view>
From here I can navigate the chat detail page, however if I click the "Chats" tab button at the bottom nothing at all happens. I'd like it to bring me to the main Chats page.
Another method I tried was using ui-sref instead of href:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>My Chats</h1>
<a ui-sref="tab.chat-detail{chatId:1}">Chat #1</a>
</ion-content>
</ion-view>
In this case I receive an error Could not resolve 'tab.chat-detail{chatId:1}' from state 'tab.dash'
What's the best way to link to a "detail" view from within another tab? My main is to make sure that clicking the tab button at the bottom always brings me to the parent page for that tab. Right now, in the first example, it gets stuck on the "detail" view.
I got a workaround. I am hiding the tab bar when navigating to nested view of another tab.
And showing it again when user navigates back to the root tab.
To know how to hide and show tab bar programmatically, check this link:-
https://stackoverflow.com/a/45002644/4527624
I have used tab component in Angular Bootstrap UI and ui-router for routing in my Angularjs app.
Now I want to active one of tabs, after change route. In fact I have a search route and I want to change tabs due to the search options (that users can select where they want to search).
I Solved my problem!
If each tab has exclusive route, we can use angular ui router sticky to handle this.
use bootstrap
users.pug
ul.nav.nav-tabs
li.nav-item(ui-sref-active-eq='active')
a.nav-link(ui-sref="users") users list
li.nav-item(ui-sref-active-eq='active')
a.nav-link(ui-sref="users.newUser") newUser
.tab-content(ui-view="usersTab")
usersList.pug
h1 users list page
newuser.pug
h1 new user page
route.js
.state('users', {
url: '/users',
templateUrl: 'users.html',
controller: 'usersCtrl'
})
.state('usersList', {
url: '/usersList',
sticky: true,
views: {
"usersTab": {
templateUrl: 'usersList.html',
controller: 'usersListCtrl'
}
}
})
.state('newUser', {
url: '/newUser',
sticky: true,
views: {
"usersTab": {
templateUrl: 'newUser.html',
controller: 'newUserCtrl'
}
}
})
And to active each tab can use: ui-sref-active-eq='active' and .active class change active tab style
I'm currently trying ionic with the tab template. I got to the stage where I have a second-level tab in one of my main tabs.
.state('tab.leaderboard', {
url: "/leaderboard",
abstract:true,
views: {
'tab-leaderboard': {
templateUrl: "templates/tab-leaderboard.html",
controller: 'LeaderboardCtrl'
}
}
})
.state('tab.leaderboard.players', {
url: "/players",
views: {
'leaderboard-page': {
templateUrl: "templates/players-leaderboard.html",
controller: 'PlayersCtrl'
}
}
})
.state('tab.leaderboard.teams', {
url: "/teams",
views: {
'leaderboard-page': {
templateUrl: "templates/teams-leaderboard.html",
controller: 'TeamsCtrl'
}
}
})
If I use a direct link to my tab tab.leaderboard.teams, the url on the address bar changes, the bar title changes but the content is not loading and the current page from where I made the call stays opened.
However if I click on a link to tab.leaderboard.teams, it works perfectly.
Also if I switch the tabs on my html and make the teams tab first then it works for teams and not for players.
Note that if I go manually to the tabs then everything is fine. The problems happens only when I use href to open it.
Any help would be appreciated.
EDIT
I also used ng-click='func()' and then on my controller used $state.go('tab.leaderboard.teams') it didn't work. Same for ui-sref on my html. The url changes but not the content.
angular-ui-router is based on states. If you want to go from one state to another then you have to use "ui-sref" or "$state.go()"
for example :
<a ui-sref="stateName">to go page</a>
I am using ui-router in my editor project. I have two ui-views, a preview pane and a settings pane.
<div ui-view="preview"></div>
<div ui-view="settings"></div>
I always want the preview view to show templates/preview.html.
By default, I want the settings view to show templates/settings/general.html.
When I click on an item inside of my preview, I want to change the settings view to show templates/settings/item.html without reloading the preview view.
For now my routing code looks like this:
.state('editor.page', {
url: "/editor/:pageId",
abstract: true,
views: {
'preview': {
templateUrl: 'templates/preview.html',
controller: 'PreviewController'
}
}
})
.state('editor.page.general', {
url: "/",
views: {
'settings#editor': {
templateUrl: 'templates/settings/general.html',
controller: 'GeneralSettingsController'
}
}
})
.state('editor.page.item', {
url: "^/editor/:pageId/:item";
views: {
'settings#editor': {
templateUrl: 'templates/settings/item.html',
controller: 'ItemSettingsController'
}
}
})
Inside my preview.html, each item is a link with a ui-sref like this:
<a ui-sref="editor.page.item({pageId:id, item:$index})">{{item}}</a>
When loading the page, I get the expected behavior: the preview shows the page as expected and templates/settings/general.htm is loaded in the settings view.
However, whenever I click on an item, the settings view is updated as expected, but the preview view is also reloaded, which I don't want. Is there a way to avoid this behavior?
I have below states defined-
.state('HomePage', {
url: '/HomePage',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('RegistrationHome', {
url: '/RegisterHome',
templateUrl: 'RegistrationHome.html',
controller: 'RegistrationHomeCtrl'
})
.state('RegisterAdditionalInfo', {
url: '/RegisterAdditional',
templateUrl: 'RegistrationAdditional.html',
controller: 'RegistrationAddCtrl'
})
From home page when I click on register button, I will be navigating to registration home page using $location.path('/RegisterHome');
Now on registration home page I provide my email Id and username and click on continue button. After clicking on continue button it provides additional fields (Age and Gender) to be filled on the same page. On click of continue $location.path('/RegisterHome/RegisterAdditionalInfo') is loading the RegistrationAdditional.html. Age and Gender are present in RegistrationAdditional.html.
Now there is one 'Cancel' button. If I click on 'Cancel' button I want to go to HomePage. On click of cancel I am calling one function in the controller and in this function I am writing
$location.path('/HomePage'); for navigation. But it's not navigating to HomePage. On click of cancel it's navigating to 'RegistrationHome'.
In url function ($location.url()) I tried to print the url. On click of 'cancel' , url is 'HomePage' but again url function is being called automatically and url value is getting changed to 'RegistrationHome'. I tried all possible ways like writing $scope.$apply() after $location.path('/HomePage'), using $state.go('HomePage') instead of $location.path('/HomePage'); but nothing worked. Could someone plz help me on this.