I have created a basic app with tabs. I have two tabs in my app, NEW and DISPLAY.
When I'm in the NEW tab, I redirect to an item in the DISPLAY tab: #/tab/display/1
Then when I click DISPLAY tab, or if I click NEW tab and then DISPLAY tab again, that same item page is shown - and the DISPLAY tab is using the DisplayItemCtrl instead of DisplayCtrl. With other words, I cannot get back to the original DISPLAY page (#/tab/display).
Is there a way to clear the history or some other way to fix this?
If I first visit the DISPLAY tab page before I go to the NEW tab page to create an item, it works, as if the route is cached, but if I don't visit the DISPLAY page when I start the app and create a new item, it will not work.
These are my states:
.state('tab.new', {
url: '/new',
views: {
'tab-new': {
templateUrl: 'templates/tab-new.html',
controller: 'NewCtrl'
}
}
})
.state('tab.display', {
url: '/display',
views: {
'tab-display': {
templateUrl: 'templates/tab-display.html',
controller: 'DisplayCtrl'
}
}
})
.state('tab.display-item', {
url: '/display/:id',
views: {
'tab-display': {
templateUrl: 'templates/display-item.html',
controller: 'DisplayItemCtrl'
}
}
})
I created a simple tabs app on codepen just to show the problem. http://codepen.io/anon/pen/GInjq First go to Dash, and click "Redirect to a friend". After that it will be impossible to reach the Friends tab start page.
This is an old post, but I still found a workaround, if someone has this issue look at my question.
Consists in putting ng-click="onTabSelected()" in the tab, and in the controller assigned to the tabs:
$scope.onTabSelected = function () {
$state.go("tab.home");
}
That way, always the tab is touched it will lead to the state I want, not the first shown or whatever, I hope it's useful for someone, the behaviour that gave the problem really looks like a bug in ionic.
Did you try state redirection from your tab?
For ex:
<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tab.display">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
see documentation
http://ionicframework.com/docs/api/directive/ionTab/
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
create a function, onTabSelected that is called when the tab is clicked so that the ui-router doesnt manage it
Related
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()"
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'm on a situation where I'm using tabs from angular-material : https://material.angularjs.org/latest/demo/tabs
Let's suppose I have a tabs with 2 cols. From the second cols I call a modal in order to submit actions. when I close the modal, I use $route.reload to refresh my view. The problem is that after $route.reload , it will come back to the first col and not remain in the second call where I was.
Is there a hack to fix this situation ?
In your config:
$routeProvider.when('/mypage/tab2', {
templateUrl: '/mypage/tab2data.html',
controller: 'pageCtrl',
title: 'Add New Courses'
}
});
In your material tab:
<md-tab label="tab1e" ng-click="tab2()"></md-tab>
Now in your controller, define the function:
$scope.tab2 = function(){
$location.path('/mypage/tab2');
}
Now when you click your tab2, url will change, you'll able to bookmark it, so it won't redirect to default tab.
I'm developing my first application. It have worked really good, but now I'm stuck with an issue related to $stateParams.
I'm developing an app which requires login and logout. And have a url in this format:
'#/tab/profile/{{userId}}'
I have a tab to show the user profile. It should read the ID from the url, and render this user.
If I login with an user, the profile is rendered correctly. But when I log out and then log in with other user, It still shows the first user profile. The $stateProvider variable, it still have the previous value.
I recorded this short video to explain my problem.
https://youtu.be/d4U1j3gKKt4
And below is my source code.
This is really driving me crazy. What should I do? Thanks a lot!
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.profile', {
url: '/profile/:userIdInUrl',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'ProfileCtrl'
}
}
})
This is the tabs code. As showed in the video, the value is correctly updated:
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-person-outline" icon-on="ion-person" href="#/tab/profile/{{userId}}">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
And this is my 'ProfileCtrl' code:
.controller('ProfileCtrl', function($http, $scope, $stateParams) {
$scope.$on('$ionicView.enter', function(e) {
console.log('$stateParams:');
console.log($stateParams);
});
I finally solved it. I finally managed to solve it.
I added this method:
$scope.goToUserProfile = function(){
$state.go('tab.profile', { userIdInUrl: AuthService.userId() });
};
And changed my tabs code to this:
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-person-outline" icon-on="ion-person" ng-click="goToUserProfile()">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
Have a nice week!
I have a home screen with a list of groups. Each list item links to the same abstract state with a parameter (gid, from groupid).
.state('group', {
url: "/group/:gid",
abstract: true,
templateUrl: "templates/group.html"
})
.state('group.members', {
url: '/members',
views: {
'group-members': {
templateUrl: 'templates/group-members.html',
controller: 'MemberCtrl'
}
}
})
.state('group.events', {
url: '/events',
views: {
'group-events': {
templateUrl: 'templates/group-events.html',
controller: 'EventCtrl'
}
}
})
.state('group.settings', {
url: "/settings",
views: {
'group-settings': {
templateUrl: "templates/group-settings.html",
controller: 'SettingsCtrl'
}
}
})
In that abstract state I have 3 tabs that should work on the same parameter/group. While this works well for the tab that I link to from the home screen, the other tabs remember their history and after going back to the home screen and selecting another group only the linked to tab shows the details for the correct group. The other tabs will show details for the previously (cached) group.
I think this might be fixed with clearing the cache somewhere, but ideally I do not want to clear it each time for each tab. While navigating between tabs in the same group the cache should be used. Only when going back to the home screen and after a new group is selected should the cache of the tabs be cleared.
An alternative might be to somehow make the other views aware that a new group has been selected. For the tab that is linked to that is easy: the parameter is given in the url. But the others are not linked to from the home screen. Is there a way to pass an argument to ion-tabs in a template file?
What is the best approach for getting this to work? This must be a use case that occurs now and then and I suspect there is a preferred way for handling it. I am using Ionic 1.0.0. Thanks.
The group-members view was being updated, but the rest of the groups view was stale. By adding cache: false to the state in the codepen below it worked fine.
http://codepen.io/whiskeyjack/pen/BNmpMx
javascript
.state('group', {
url: "/group/:gid",
abstract: true,
cache: false,
templateUrl: "templates/group.html"
})
See also $ionicHistory.clearCache() at http://ionicframework.com/docs/api/service/$ionicHistory/
Use this way to clear cache in ionic
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>