I currently have a state that looks like this:
.state('test-event-list', {
parent: 'private',
url: '/test-events?search&sortc&sortd&pagesize&page&select&status',
reloadOnSearch: false,
views: {
'view#body': {
templateUrl: 'app/config-test/test-event/list.html',
controller: require('./config-test/test-event/list')
}
},
data: {
auth: true
}
})
I am using $location.search() to set the different parameters such as sorting, list size and list page in the querystring.
So for example, the URL could look like this:
/test-events?pagesize=25&page=1
I have a menu that has the following link to select the tests event list:
<a ui-sref="test-event-list" ui-sref-opts="{reload: true, inherit: false}">Tests</a>
While in the state "test-event-list", clicking this link, does partly what I want: reset the list's parameters and reload the page. But what it's not doing is remove the params from the query string.
How could I go about removing "?pagesize=25&page=1" from the URL?
The inherit flag provided by ui-router doesn't seem to be doing much. I am using the latest version of ui-router (0.2.15).
You could try to go:
<a ui-sref="test-event-list({})" ui-sref-opts="{reload: true, inherit: false}">Tests</a>
because query strings parameters are not mandatory
I had this same issue where I just wanted to remove the query from the end of the URL. I was able to remove the query by passing an empty string for each param. It would look something like this for you.
<a ui-sref="test-event-list({ pagesize: '', page: '' })">Tests</a>
For me is was a little different. I didn't need to pass in the current routes name.
<a ui-sref="{ date: '' }">all logs</a>
Related
I need to dynamically construct a link to another route on an angular app using ui-sref with both params and query params. Example:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({cid:comment.activityItemId, cid:itemId})">{{comment.subject}}</a>
This constructs a link that looks something like
www.website.com/pass/11/conversations/178
I need to also add a query parameter to the end of this so the entire url will look like
www.website.com/pass/11/conversations/178?comment_id=126
Add the query parameters to the url in the ui router config:
.state('yourstate', {
url: '/pass/:activityId/conversations/:conversationId?comment_id',
templateUrl: 'path/to/template',
controller: 'YourController'
});
Then pass the comment_id just like you pass the other params:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({activityId:comment.activityItemId, conversationId:itemId, comment_id: 126})">{{comment.subject}}</a>
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 the following link.
<a ui-sref="...">Clicking this adds ?test=true to the query params.</a>
Is there a way to use the ui-sref attribute to just change query params without reloading the page or directing to another function?
You should be able to do it by passing the arguments with the state.
try:-
<a ui-sref="yourStateName({test:true})">Clicking this adds ?test=true to the query params.</a>
Usage:
ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()
ui-sref='stateName({param: value, param: value})' - Navigate to state, with params.
Just define the names of query params in the state url
$stateProvider.state('posts', {
url: '/posts?test&answer',
views: {
content: {
templateUrl: 'templates/posts/index',
controller: 'PostsController'
},
navbar: {
templateUrl: 'templates/partials/navbar'
}
}
})
And use like this
<a ui-sref="posts({test: true, answer: false})">Next Page</a>
I am using ui-router version 0.2.15
In combination with PSL's answer, to prevent refreshing when setting up the state, just use the property reloadOnSearch: false.
.state('myState', {
url: '/myState?test',
reloadOnSearch : false,
...
})
As long as your queries then take place within this same state.
I am using Angular UI Router and seem to be experiencing an odd issue. When I click a link that has a ui-sref directive attached to it, it successfully loads the new view as I would expect, HOWEVER, it does not update the URL bar. I believe this is ocurring because the parent state's url is a dynamic StateParam /:room. How do I get around this issue?
Here is a snippet of my UI Router
// Room
.state({
name: 'room',
url: "/:room",
views: {
"main": {
templateUrl: "views/pages/chat.html",
controller: "RoomCtrl"
},
"login#room": {
templateUrl: "views/partials/_login.html"
},
"navigation#room": {
templateUrl: "views/partials/_navigation.html",
controller: "NavigationCtrl"
}
},
resolve: {
userLocation: function(geolocationFactory) {
return geolocationFactory;
}
}
})
// Share
.state({
name: 'room.share',
url: "/share",
views: {
"share#room": {
templateUrl: "views/partials/_share.html",
controller: "ShareCtrl"
}
}
});
ui-sref
<button id="share-button" ui-sref="room.share">Share</button>
I created a plunker to demonstrate what is happening
So we can navigate among rooms like this:
<a ui-sref="room({room:1})">room 1</a>
<a ui-sref="room({room:2})">room 2</a>
<a ui-sref="room({room:3})">room 3</a>
this will in fact creat the url like this
#/1 // where 1 represents the id of the :room
#/2
#/3
Now, we can navigate to the substate .share without specifying the :room id
<a ui-sref="room.share">room.share</a>
And what will happen? Firstly the place for :room will be empty ... no room is selected.
Secondly - the previously selected room (its :room id) won't be changed. So the resulting URL will depend on the already selected room. If we were in a room 2, the generated url will be:
#//share
but we will be redirected to
#/2/share
becuase there is still $stateParams.room === 2
Finally, we should always pass the complete state signature:
<a ui-sref="room.share({room:1})">room.share({room:1})</a>
<a ui-sref="room.share({room:2})">room.share({room:2})</a>
<a ui-sref="room.share({room:3})">room.share({room:3})</a>
Check that all here (click the top right corner blue icon to open the prview in sepearate window with url)
I had this problem because my parameter names did not match my URL definition.
For example, I had a parameter set like this:
{
page: {...},
results: {...},
sort: {...},
}
...and a URL like this:
url: '/foo?page&results&orderby'
After fixing the mismatch between sort and orderby, the address bar updated as expected.
I am using ui-router to represent states in my AngularJS app. In it I'd like to change the state without changing the URL (basically a "detail view" is updated but this should not affect the URL).
I use <a ui-sref="item.detail({id: item.id})"> to display the detail but this only works if I specify a URL like url: "/detail-:id" in my $stateProvider.
It seems to me that the current state is only defined through the URL.
Just an additional information for new comers to this post:
Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']
So be aware :)
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
Thanks for your answer, it did help me in the right direction but I'd just like to add a more complete description.
In my specific issue there was a complicating factor because the state I needed to inject a non-URL parameter to was a child state. That complicated things slightly.
The params: ['id'] part goes in the $stateProvider declaration like this:
$stateProvider.state('parent', {
url: '/:parentParam',
templateUrl: '...',
controller: '...'
}).
state('parent.child', {
params: ['parentParam','childParam'],
templateUrl: '...',
controller: '...'
});
And the param name is connected to the ui-sref attribute like this:
<a ui-sref=".child({ childParam: 'foo' })">
And the catch is this:
If the parent state also has a URL parameter then the child needs
to also declare that in its params array. In the example above "parentParam" must be included in the childstate.
If you don't do that then a module-error will be thrown when the application is initialized. This is at least true on the latest version at the time of writing (v.0.2.10).
EDIT
#gulsahkandemir points out that
Declaration of params in a state definition has changed to params: {
id: {} } from params: ['id']
Judging by the changelog, this seems to be the case starting from v0.2.11
Details of params can be found in the official docs
I now figured out, that you need to use the params: ['id'] property of the state in order to have the key not stripped when not using a URL.