I have Settings view and Settings subview:
$stateProvider
.state('sidemenu.settings', {
url: '/settings',
views: {
'mainContent': {
templateUrl: 'partials/settings/settings.html',
controller: 'SettingsController'
}
}
})
.state('sidemenu.default-location',{
url: '/default-location',
views:{
'mainContent':{
templateUrl: 'partials/settings/defaultLocation.html',
controller:'SettingsController'
}
}
})
You can notice that both use the same controller: SettingsController.
When I call from main Settings view $state.go('sidemenu.default-location'); it reloads SettingsController again. Why?
(I don't want to use ng-show/hide)
My question is if I stay in some controller and next state uses the same controller how to prevent controller reload?
Related
I have a 'home' view a 'messaging' view and a 'conversations' view. I want the 'home' view to always show the 'messaging' view. That's the easy part and I've done that in the code below. But when the user clicks on a link in the 'messaging' view I want to:
Navigate to the 'conversations' view (which the sample below does).
or
Show the 'conversations' view as a child of 'messaging'.
Here is a link to what I have so far. I have spent quite a bit of time trying to get this to work and haven't been able to get it to do both '1' and '2'. Here is my current state configuration. You can see the full example at this link:
http://plnkr.co/edit/eVhPAr4zGmsbiNUKdzz3?p=preview
homeApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': { templateUrl: 'home.html', controller: "homeController" },
'messaging#home': { templateUrl: 'messaging.html', controller: "messagingController" }
}
})
.state('conversations', {
url: '/conversations',
views: {
'': { templateUrl: 'conversations.html', controller: "conversationsController" }
}
})
});
Then you can try to use nested states or nested views to do it.
I'm not sure it's the way you want to do it but look at this plunker, it does the job using nested state like this :
.state('home.nestedView', {
url: '/nestedView',
views: {
'': { templateUrl: 'conversations.html' }
}
})
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?
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?
I have this home state in my router config,
.state('home', {
url: '',
controller: 'addMovieCtrl',
views: {
"frontpage": {
templateUrl: '../assets/angular-app/templates/_frontpage.html',
// controller: 'addMovieCtrl'
},
"movieoverview": {
templateUrl: '../assets/angular-app/templates/_movieTemplate.html',
// controller: 'addMovieCtrl'
}
}
})
I want both my views to work with the addMovieCtrl controller, but if I assign the controller in the state (like in the example above) the controller doesn't get called.
When I assign the controller in the view (which I now have commented out) it does get called, but I'm pretty sure I should be able to asign a controller to a state and that adds the controller to all the views. Right?
No, you need to assign a controller to each view. So, your commented out code is the right way to do it.
views: {
"frontpage": {
templateUrl: '../assets/angular-app/templates/_frontpage.html',
controller: 'addMovieCtrl'
},
"movieoverview": {
templateUrl: '../assets/angular-app/templates/_movieTemplate.html',
controller: 'addMovieCtrl'
}
}