I am trying to pass parameters from one view to another in my anulgar/ionic app.
in the volCompute view ($stateParams is declared):
if ($stateParams.modelLine){
console.log('receiving', $stateParams.modelLine.id, $stateParams.modelLine.modelStrict)
$scope.data.chosenModel = $stateParams.modelLine.modelStrict;
}
in the compareview:
$state.go('app.volCompute', { modelLine: test[0] }, {reload: true});
but it works only one time, if I go back and forth between the two views the code in volCompute is not run.
It seems like the reload: true is only executed once.
Can you help please ?
There are few more details how to understand ionic caches
What is the difference between $ionicView.enter and cache:false
ui.router not reloading controller
And I would suggest to use the event hook here $ionicView.enter or $ionicView.afterEnter
$scope.$on('$ionicView.enter', function(){
// Coding
});
there is the link to doc
In your routes file:
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
Or inidividually in an <ion-view> tag:
<ion-view cache-view="false">
...
</ion-view>
I am wondering how can I go to the same state, with different $stateParam?
I was trying to go with:
$state.go('^.currentState({param: 0})')
However, it was not working.
the params are second paramater of the go() method
$state.go('^.currentState', {param: 0})
go(to, params, options)
Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).
You might want to use this piece of code:
<a ui-sref=".({param: 0})"></a>
No need to use controller.
In my case, I wanted to reload the same state, but with different parameters. (null in this specific occurrence)
The situation is as follows: We have a website with different companies, each with their own branding page. You can visit other companies' pages and there's a menu entry to quickly visit your own.
A company's page is located under /company/somecompanyid, whereas your own page will be loaded when visiting /company. Without the addition of an id. Or company_id: null in code.
The problem
When you're viewing a random company's page, let's say company/123456 and you click the designated menu entry to visit your own page, nothing would happen!
Ui-router believes you're on the same route and simply keeps you there.
The solution
Add the following to your template:
<a ui-sref="company" ui-sref-opts="{reload: true, inherit: false}" ... ></a>
What does it do?
reload: true This will force your state to reload. But it'll copy your current route parameters. Which means your still seeing the other company's page.
inherit: false Setting the inherit property to false will force ui-router to use the params you provided. In my case, the companyId was null and user's personal page was loaded. Hurray!
You can find all ui-sref-options on the documentation pages. ui-sref-options
If you'd like to reload your state, you can also use ui-sref-opts. Passing in the reload: true option, will reload the current state.
<a ui-sref-opts="{reload:true}" ui-sref="app.post.applicants">Applicants</a>
The simplest solution is ->
You can make 2 state with same controller and same html page and redirect one by one
PROS: No need to handle back history and all works with the great flow
.state('app.productDetails', {
url: '/productDetails',
cache: false,
views: {
'menuContent': {
templateUrl: 'src/products/productDetails/productDetails.html',
controller: 'ProductDetailsCtrl'
}
},
params: {
productID: 0,
modelID: 0
}
})
.state('app.modelDetails', {
url: '/modelDetails',
cache: false,
views: {
'menuContent': {
templateUrl: 'src/products/productDetails/productDetails.html',
controller: 'ProductDetailsCtrl'
}
},
params: {
productID: 0,
modelID: 0
}
})
$state.go('.', {param: someId});
My app uses $state.go when switching between tabs and this cause to re-initializes the controllers and scope variable in those controllers get updated and causes memory leaks. Is there a way to stop re-initializing the controllers but change URL on state change?
Example below is routes.js in my app.
.state('home',
{
abstract : true,
url : '/home',
templateUrl : 'scripts/home.html'
})
.state('home.summary',
{
url : '/summary?userId',
controller : 'SummaryCtrl',
views :
{
summary:
{
templateUrl: 'scripts/home/summary.html'
}
}
})
.state('home.summary.detail',
{
url : '/detail/:id',
controller : 'DetailCtrl',
views :
{
detail:
{
templateUrl: 'scripts/home/detail.html'
}
}
})
How to stop reloading DetailCtrl but change URL when going to state home.summary.detail if the DetailCtrl is already loaded for unique id???
Also tried to $q.reject in resolve of child state, it stops reload of controllers but doesn't change url.
Also tried reloadOnSearch=false it stops reload of controllers but doesn't change url.
You can use $state.transitionTo instead of $state.go . $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true } . You can call $state.transitionTo and set location: false . For example:
$state.go('.detail', {id: newId})
can be replaced by
$state.transitionTo ('.detail', {id: newId}, { location: false, inherit: true, relative: $state.$current, notify: true })
You can have a abstract controller that contain your memory leak code.
And a abstract controller will not update when url change.
Here is the doc from official github repo
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
look at the Combination part.
here is the plnkr, contacts controller will only call once in this demo
contacts.detail controller will update every time you change state but share the scope with contacts controller
http://plnkr.co/edit/gmtcE2?p=preview
I'm using Angular UI Router and would like to reload the current state and refresh all data / re-run the controllers for the current state and it's parent.
I have 3 state levels: directory.organisations.details
directory.organisations contains a table with a list of organisations. Clicking on an item in the table loads directory.organisations.details with $StateParams passing the ID of the item. So in the details state I load the details for this item, edit them and then save data. All fine so far.
Now I need to reload this state and refresh all the data.
I have tried:
$state.transitionTo('directory.organisations');
Which goes to the parent state but doesn't reload the controller, I guess because the path hasn't changed. Ideally I just want to stay in the directory.organisations.details state and refresh all data in the parent too.
I have also tried:
$state.reload()
I have seen this on the API WIKI for $state.reload "(bug with controllers reinstantiating right now, fixing soon)."
Any help would be appreciated?
I found this to be the shortest working way to refresh with ui-router:
$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams
Update for newer versions:
$state.reload();
Which is an alias for:
$state.transitionTo($state.current, $stateParams, {
reload: true, inherit: false, notify: true
});
Documentation: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload
This solution works in AngularJS V.1.2.2:
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
That would be the final solution. (inspired by #Hollan_Risley's post)
'use strict';
angular.module('app')
.config(function($provide) {
$provide.decorator('$state', function($delegate, $stateParams) {
$delegate.forceReload = function() {
return $delegate.go($delegate.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
};
return $delegate;
});
});
Now, whenever you need to reload, simply call:
$state.forceReload();
for ionic framework
$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload
$stateProvider.
state('home', {
url: '/',
cache: false, //required
https://github.com/angular-ui/ui-router/issues/582
Probably the cleaner approach would be the following :
<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>
We can reload the state from the HTML only.
#Holland Risley 's answer is now available as an api in latest ui-router.
$state.reload();
A method that force reloads the current state. All resolves are
re-resolved, controllers reinstantiated, and events re-fired.
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
$state.go($state.current, $stateParams, {reload: true, inherit: false});
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };
if you want to reload your entire page, like it seems, just inject $window into your controller and then call
$window.location.href = '/';
but if you only want to reload your current view, inject $scope, $state and $stateParams (the latter just in case you need to have some parameters change in this upcoming reload, something like your page number), then call this within any controller method:
$stateParams.page = 1;
$state.reload();
AngularJS v1.3.15
angular-ui-router v0.2.15
Silly workaround that always works.
$state.go("otherState").then(function(){
$state.go("wantedState")
});
For angular v1.2.26, none of the above works. An ng-click that calls the above methods will have to be clicked twice in order to make the state reload.
So I ended up emulating 2 clicks using $timeout.
$provide.decorator('$state',
["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
$delegate.forceReload = function () {
var reload = function () {
$delegate.transitionTo($delegate.current, angular.copy($stateParams), {
reload: true,
inherit: true,
notify: true
})
};
reload();
$timeout(reload, 100);
};
return $delegate;
}]);
Everything failed for me. Only thing that worked...is adding cache-view="false" into the view which I want to reload when going to it.
from this issue https://github.com/angular-ui/ui-router/issues/582
Not sure why none of these seemed to work for me; the one that finally did it was:
$state.reload($state.current.name);
This was with Angular 1.4.0
I had multiple nested views and the goal was to reload only one with content.
I tried different approaches but the only thing that worked for me is:
//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);
//state config
$stateProvider
.state('app.dashboard', {
url: '/',
templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
controller: 'DashboardController',
controllerAs: 'vm',
params: {reload: false} //add reload param to a view you want to reload
});
In this case only needed view would be reloaded and caching would still work.
I know there have been a bunch of answers but the best way I have found to do this without causing a full page refresh is to create a dummy parameter on the route that I want to refresh and then when I call the route I pass in a random number to the dummy paramter.
.state("coverage.check.response", {
params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
views: {
"coverageResponse": {
templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
controller: "coverageResponseController",
controllerAs: "vm"
}
}
})
and then the call to that route
$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });
Works like a charm and handles the resolves.
You can use #Rohan answer https://stackoverflow.com/a/23609343/3297761
But if you want to make each controller reaload after a view change you can use
myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }
If you are using ionic v1, the above solution won't work since ionic has enabled template caching as part of $ionicConfigProvider.
Work around for that is a bit hacky - you have to set cache to 0 in ionic.angular.js file:
$ionicConfigProvider.views.maxCache(0);
I had this problem it was wrecking my head, my routing is read from a JSON file and then fed into a directive. I could click on a ui-state but I couldn't reload the page. So a collegue of mine showed me a nice little trick for it.
Get your Data
In your apps config create a loading state
Save the state you want to go to in the rootscope.
Set your location to "/loading" in your app.run
In the loading controller resolve the routing promise and then set the location to your intended target.
This worked for me.
Hope it helps
I have an app setup with 2 states, A and A.B done this way:
$stateProvider.state('A', {
url: "/A/{aId}",
controller: 'AController',
templateUrl: function($stateParams) {
return "/A/" + $stateParams.aId + "/layout";
}
}).state('A.B', {
url: "/B/{bId}",
controller: 'BController',
templateUrl: function($stateParams) {
return "/A/" + $stateParams.aId + "/B/" + $stateParams.bId+ "/layout";
}
});
When I'm in state A.B ( the url would be somthing like #/A/12/B/123 ) and go back using the back button of the browser or transitionTo the url changes, state A.B is cleared but state A doesn't render back. As far as I can tell the controller isn't triggered.
So if I'm in A/12/B/123 and go back to A/12 nothing happens, but if I go back to A/13 ( using transitionTo ) it renders.
On the sample app from angular-ui-router project this scenario works fine, so I think there might be something wrong in my setup. I think it's worth mentioning that on index.html I have a ui-view which loades state A and the template for state A has another ui-view that loads state A.B
If anyone could help, I would really appreciate it
Have you tried using this:
$state.reload()
Its a method that force reloads the current state. All resolves are re-resolved, events are not re-fired, and controllers reinstantiated
This is just an alias for:
$state.transitionTo($state.current, $stateParams, {
reload: true, inherit: false, notify: false
});