In Ionic I got a slider in one tab. On click on a slide I want to jump to a subpage on another tab. I achieve that using
$state.go('^.station', {stationId:clickedSlide});
I get to view alright, but there is no back button to the root view (.stationen) of this tab. It seems to clear the entire historyStack of this tab. Even if I try to first jump to .stationen first and then to .station I do not get a back button.
My stateProvider looks like so:
.config(function($stateProvider, $urlRouterProvider) {
$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.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapController'
}
}
})
.state('tab.stationen', {
url: '/stationen',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-stationen.html',
controller: 'StationenCtrl'
}
}
})
.state('tab.station', {
url: '/stationen/:stationId',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-station.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
});
I tried setting options in my $state.go() call but to no avail. Also nesting the .station in .stationen did not get me any results. What am I missing?
Related
My website has 2 main routes:
/home
/:something
Any request to / should go to /home and this is done by using 'otherwise', anything else that does not match home AND is not empty should go to app.lista. The thing is, app.lista matches / because is like :slug is empty, so otherwise is not being called:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: '/_/common/templates/main.html',
controller: 'main'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
How can I tell the stateProvider to not match app.lista if :slug is empty?
Looks like same issue which is logged Here on github and solution seems to be the use ragular expression
I think changing your slug route to
.state('app.lista', {
url: '/{slag:[^\/]+}',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
Should solve your problem plunker
Make your app route non-abstract and change the template and controller to point to that of app.home. Since it is defined before app.list, '/' will match app route instead.
$stateProvider
.state('app', {
url: '/',
templateUrl: '/_/common/templates/home.html',
controller: 'home'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('app.lista', {
url: '/:slug',
templateUrl: '----.html',
controller: 'list',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.slug=== undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
i am with doubt of like i call an view inside of other view. I want call the view " menu " in side of state "login" . However is not working
$stateProvider
.state('menu', {
abstract:true,
views: {
"menu": {
templateUrl: 'assets/templates/menu/menu.html',
controller: 'MenuController',
}
}
})
.state("login", {
url: '/login',
views: {
"": {
templateUrl: 'assets/templates/LoginTest.html',
controller: 'LoginController as ctrl',
},
"#menu":{ }
}
});
You need to use nested state for that.
This tutorial will help you AngularJS Multi-Step Form Using UI Router
working plunkr :https://plnkr.co/edit/ar9kbBCdggZxvUGDq5HI?p=preview
$stateProvider
.state('login', {
abstract:true,
url: '/login',
templateUrl: 'assets/templates/LoginTest.html',
controller: 'LoginController as ctrl'
})
// nested states
// each of these sections will have their own view
// url will be nested (/login/menu)
.state("login.menu", {
url: '/menu',
templateUrl: 'assets/templates/menu.html',
controller: 'MenuController'
}
);
I am trying to use resolve and conditional routing in angular ui-router but it doesnt seem to work
App.js:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html'
})
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html'
}
}
})
.state('app.therapist', {
url: '/therapist',
views: {
'menuContent': {
templateUrl: 'templates/therapist.html'
}
}
}).state('app.trial', {
url: '/trial',
views: {
'menuContent': {
templateUrl: 'templates/trial.html'
}
},
resolve:{
check:function($state){
if(1==1){
e.preventDefault();
$state.go('app.login',{}) ; /**/Here trying**
}else{
return true;
}
}
}
$urlRouterProvider.otherwise('/app/therapist');
});
So in app.trail route I was testing and trying to redirect to app.login but it doesnt work it only opens the trial page
In e.preventDefault(); you appear to be missing anything defined as e.
You can use preventDefault() when handling an event such as $stateChangeStart, but I don't think that is available within resolve.
See Angular ui-router $state.go is not redirecting inside resolve for some suggestions on how to handle this (do the check inside a handler for $stateChangeStart, or send an event to trigger the transition, or use a timeout to delay your state change until after the first one has completed).
I'm using angular 1.5.2 and angular ui router 0.2.5, i make a page transition, from a state to another state, only the screen changes, but the controller not change, i tried to do the transition by three different ways:
$location.path('/home');
$state.go('home');
$state.transitionTo('home');
the states
appTmw.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider.state('login', {
url: '/login',
controller: 'LoginCtrl',
views: {
'': {
templateUrl: '/components/login/loginview.html'
}
}
})
.state('home', {
url: '/home',
controller: 'HomeCtrl',
views: {
'': {
templateUrl: '/components/home/homeView.html'
},
'nav#home': {
templateUrl: '/assets/partials/cabecalho.html'
},
'rod#home': {
templateUrl: '/assets/partials/rodape.html'
}
}
})
...
The screen change from login to home, but the controller remains the LoginCtrl.
What is wrong with de code?
Currently I'm using states in my Ionic Framework App. When I press the back button to return to a previous state it shows the current state and the state that it should transition to in the same screen.
Error Screen:
Each Individual Screen Looks like this:
Screen 1:
Screen 2:
On transition from Screen 1 back button to Screen 2 the error screen occurs.
In my configuration file the current setup is as such:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-event': {
templateUrl: 'views/events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.event-detail',{
url:'/events/:eventId',
views: {
'tab-event':{
templateUrl: 'views/event.html',
controller: 'EventDetailsCtrl'
}
}
})
.state('tab.attendees',{
url: '/events/:eventId/attendees/:attendeeIds',
views: {
'tab-event':{
templateUrl: 'views/attendees.html',
controller: 'AttendeesCtrl'
}
}
})
.state('tab.attendee-detail',{
url: '/events/:eventId/attendee/:attendeeId',
views: {
'tab-event':{
templateUrl: 'views/attendee.html',
controller: 'AttendeeDetailCtrl'
}
}
});
$urlRouterProvider.otherwise('/login');
});
When i press the back button From the 'tab.attendees' state back to the 'tab.event-detail' state the error occurs. If it helps I transition from 'tab.event-detail' state to 'tab.attendees' state via anchor tag like so:
<a ng-href="#/tab/events/{{event.id}}/attendees/{{event.attendees}}">See Attendees</a>
What could be causing the screen mix?