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.
Related
In the very new release of UI-Router1.0.0-alpha.1 Christopher Thielen announced dynamic parameters. For my understanding, if a param is configured to be dynamic, when changing it from the controller the URL should change accordingly. I tried several methods and couldn't make this happen. There doesn't seem to be binding between $state.params.myParam and $stateParams.myParam.
Can someone please share a working example, or tell me if it is indeed not working?
Thanks
It is not enough to just change the dynamic parameter. The location changes when performing state transition, using ui-sref or $state.go().
When transitioning to the current state where the only change is in parameters that are defined as dynamic, the controller is not reloaded.
example:
$stateProvider.state({
name: 'home',
url: '/home/:dynamicParam',
template: template,
controller: controller,
params: {
dynamicParam: {
dynamic: true
}
}
});
Change the param using: ui-sref=".({ dynamicParam: newVal })" or $state.go('.', { dynamicParam: newVal })
Here's a plunker made by Chris Thielen that demonstrates this.
I have a state like this in $stateProvider
$stateProvider.state('rubricacontatti.home', {
url: '/home/:section',
templateUrl: 'rubricacontatti/static/html/rubricacontatti.home.html',
});
and I must pass param section programmatically without using ui-sref or $state.go. Due to project choises I'm constrained to use this:
route: 'rubricacontatti.home'
How can I pass param to route?
I'm not sure how you are programmatically getting the value but the stateConfig has a params property that takes an object with any number of properties. Should be able to set it their.
$stateProvider.state('rubricacontatti.home', {
url: '/home/:section',
templateUrl: 'rubricacontatti/static/html/rubricacontatti.home.html',
params: {
myParam1: "programmatically set value"
}
});
See the $stateProvider docs.
I have this simple state :
.state('search', {
url: '/search',
templateUrl: 'views/search.html',
controller: 'search'
})
And I would like to pass any extra unplanned parameters to the controller when using search state or /search route :
ui-sref="search({foo:1, bar:2})"
// would call '#/search?foo=1&bar2',
// match the state and pass foo and bar to the controller (through $stateParams)
When I try this, it matches the otherwise of the router instead. :(
I've read a lot of solutions that imply to declare each parameter in the state:
.state('search', {
url: '/search?param1¶m2¶m3?...',
})
But I cannot do this as far as the parameters list is not really defined and changes all the time depending on searched content.
Is there a way to achieve this ? Or am I wrong somewhere ?
Thx.
EDIT : When I try to call directly this url : #/search?foo=1, the state search matches but the foo parameter never goes to $stateParams which is empty. I don't know how to get it in.
.state('search', {
params: ['param1','param2','param3'],
templateUrl: '...',
controller: '...'
});
ui-sref="search({param1:1, param2:2})"
Credit goes to Parameters for states without URLs in ui-router for AngularJS
When I'm doing
$state.includes('courses.all({ clientType: "organizations" })')
it returns undefined
and it works for
$state.includes('courses.all')
clientType is optional param here (it's 'organizations' by default)
So is it a bug or a feature?
UPD:
It does not work just with brackets as well:
$state.includes('courses.all()')
Its a featue, $state.includes is checking if the name of state you provided is present in the full state name.
Example: if you have state: 'app.state1.state2.state3' then state includes will return true for any of those substates.
On the other hand, if you want ot check for state parmas you have to do it in router's resolve or in controller directly
I think what you're looking for is:
$state.includes('user.forms.preview', { type: 'patients' })
My state looks something like:
.state('user.forms.preview', {
page_title: 'Configuracion datos de Pacientes',
url: '/preview/:type',
controller: 'userFormPreviewerCtrl',
templateUrl: 'whathever.html',
})
well in your case would be:
$state.includes('courses.all', { clientType: "organizations" })
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.