I'm performing an operating in a modal on a page within AngularJS. Once the operation is completed, I am calling the routing mechanism as follows:
$state.go('pagename', { id: someid});
Effectively I'm trying to navigate from /pagename/1 to /pagename/2. However, when I call $state.go, it does not navigate to the new page, presumably because I am already technically on it. Is there a way to update/refresh the current view with the new URL parameters?
$state.go('pagename', { id: someid }, { reload: true });
If you look at this github.io page, at the go(to, params, options) section there's a bit on the 'options'. In your case the params -have- changed, so that's why I suggest including the reload: true options.
Related
I am migrating an app from AngularJs to Angular 7. In the old ui-router I was able to update the location without reloading the state with below code.
this.syncLocation = function (paramObj) {
var params = _.clone($state.params);
params = _.merge(params, paramObj);
$state.transitionTo($state.current.name, params, {
location: true,
notify: false
});
};
However with new Angular & UI-Router I am unable to get this done. Not sure if it is due to Change Detection Strategy or changes to UI-Router itself.
syncLocation(paramObj) {
console.log("syncLocation", paramObj);
let params = _.clone(this.stateService.params);
params = _.merge(params, paramObj);
this.stateService.go(this.stateService.current.name, params, {
reload: false
});
}
I have created plunker to reproduce the problem. The problem is described in the component colors.component.ts link. In this plunker I don't want to reload the page even though I check/uncheck the checkbox.
The idea is that I have a complicated page where I cannot afford to lose the contents by reloading the page but still be able to update the location. It is a simplified page with the problem.
Any help is appreciated.
You can update the url with Location.replaceState()
See: replaceState()
Inject Location with di and use like this:
constructor(private location: Location) {
...
private syncLocation(){
this.location.replaceState(`whatever/state/or/path/you/need`);
}
}
There are other useful methods in Location such as Path you may want to reference.
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});
I have a UI-Router site with the following states:
$stateProvider
.state('order', {
url: '/order/:serviceId',
abstract:true,
controller: 'OrderController'
})
.state('order.index', {
url:'',
controller: 'order-IndexController'
})
.state('order.settings', {
url:'',
controller: 'order-SettingsController'
})
Where my two states do NOT have a url set, meaning they should only be reachable through interaction with the application. However the order.index state is automatically loaded by default because of the order in which I have defined the states.
I am noticing that trying to do a ui-sref="^.order.settings" or $state.go("^.order.settings") then ui-router first navigates to the order.settings state and then it immediately navigates to the order.index state (default state). I think this is happening because the url changing is causing a second navigation to occur and since the state.url == '' for both, it automatically defaults to the order.index state...
I tested this out by setting the {location: false} object in the $state.go('^order.settings', null, {location:false}). This caused the correct state to load (order.settings), but the url did not change. Therefore I think the url changing is triggering a second navigation.
I'd understand, can imagine, that you do not like my answer, but:
DO NOT use two non-abstract states with same url defintion
This is not expected, therefore hardly supported:
.state('order.index', {
url:'', // the same url ...
...
})
.state('order.settings', {
url:'', // .. used twice
...
})
And while the UI-Router is really not requiring url definition at all (see How not to change url when show 404 error page with ui-router), that does not imply, that 2 url could be defined same. In such case, the first will always be evaluated, unless some special actions are used...
I would strongly sugest, provide one of (non default) state with some special url
.state('order.settings', {
url:'/settings', // ALWAYS clearly defined
...
})
How to config UI Router to reenter or reload the state by default?
E.g. user wants to refresh page, so he clicks the link that follows to that page. But currently the link isn't clickable, as it goes to the same page and the state doesn't change. Refreshing with browser button does work, so it reloads entire SPA again - isn't desirable.
This question - Reloading current state - refresh data - describes similar effect. Is it possible to change this solution - https://stackoverflow.com/a/23198743/404099 - to define the default behavior?
By the way, probably my approach is incorrect and I'm missing some basic idea in UI Router. Please point out if this is the case.
I second what #Sabacc said, but if you still instead, here you go:
angular.module('app')
.config(function($provide) {
$provide.decorator('$state', function($delegate)
{
$delegate.go = function(to, params, options)
{
return $delegate.transitionTo(to, params, angular.extend(
{
reload: true,
inherit: true,
relative: $delegate.$current
}, options));
};
return $delegate;
});
});
I have a router defined somewhat similar to the following (greatly simplified for demo purposes here):
var MyRouter = Backbone.Router.extend({
routes: {
'': 'search',
'directions': 'directions',
'map': 'map'
},
search: function () {
// do something
},
directions: function () {
// do something
},
map: function () {
// do something
},
initialize: function () {
this.listenTo(myModel, 'change', this.updateNavigation);
Backbone.history.start({ pushState:true });
},
updateNavigation: function () {
var selected = myModel.get('selected');
this.navigate(selected);
}
});
The history entries are all getting created properly by the updateNavigation call, and when I hit the back-button to go back through the history I've generated, the routes fire for each of the entries, that is until I get to the initial entry. At that point, even though the url has updated with that history entry, the route that should interpret the url at that point does not fire. Any idea what might be going on here? Am I making some bad assumptions about how history works?
EDIT:
It seems I get inconsistent results - it's not always just the initial entry that doesn't execute, it's sometimes anything after the first time I've went back one through history. That is, I click the back-button once, the url changes, the routes fire properly. I hit it again, the url changes, the routes don't fire. It smacks of me doing something wrong, but I haven't a clue.
Don't ask me why, but my browser back button doesn't seem to function properly when I don't trigger: true on #navigate.
My very brief assumption is that Backbone.history.start({ pushState:true }); used in wrong place.
As far as I know, backbone history start should be after the router instance is created. Like,
var router = new MyRouter();
Backbone.history.start({ pushState:true });
I've discovered the problem. I was using a querystring and updating the querystring based on actions within the application. Each time I modified the querystring, I added another history entry, but the actual route parts of the history entry didn't always change. Backbone won't do do anything different based on the same route but with different querystring, so I had to abandon using the querystring and just make restful urls instead. Once I did that, the history worked fine.