UI-Router and additional parameter in subroutine without reboot controller
I have a site with two columns. There is a list of conversations on the left and conversation details on the right, and I would like to have routes in the UI-Router like this:
/messages - initial route will redirect to first conversation
/messages/:id - this will load conversation list and requested detail
I tried to do split states in the UI router, but it reloads the entire view and controller - I would like to just get a new event $stateChange
and not reload the controller.
My actual semi-working solution is this:
$stateProvider
.state('messages', {
url: '/messages',
templateUrl: 'templates/messages/list.html',
controller: 'MessagesCtrl'
})
.state('messages.root', {
url: '/:id'
})
Which doesn't reload the whole controller when I change the parameter in the url, but when I load for example this url /messages/556d6f8e64303702b1000000
, I don't get the id in the variable .. $stateParams.id
Can you help me?
source to share
There is a working plunker
Dot - the parameter is declared in a child state, so only the child state controller can access it
The child's state has a controller:
.state('messages', {
url: '/messages',
templateUrl: 'templates/messages/list.html',
controller: 'MessagesCtrl'
})
.state('messages.root', {
url: '/:id',
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
})
The child controller has access to these parameters defined for it:
.controller('MessagesCtrl', ['$scope', function ($scope) {
console.log("was initated");
}])
.controller('ChildCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
console.log("child was initated");
console.log($stateParams.id);
}])
Check here
In case we want to track the current active link and track it in the parent, while the active is the child, we have created support.
ui-sref-active
There is an updated plunker
So this could be our parent template "templates / posts / list .html":
...
<a ui-sref-active="active" ui-sref="messages.root({id:1})">
<a ui-sref-active="active" ui-sref="messages.root({id:'556d6f8e64303702b1000000'})">
<a ui-sref-active="active" ui-sref="messages.root({id:'556d6f8e64303702b1bbbbbb'})">
<a ui-sref-active="active" ui-sref="messages.root({id:'556d6f8e64303702b1xxxxxx'})">
There are other ways to use $state.includes(stateOrName, params, options)
A way to determine if the current active state is equal to or is a child of the state name stateName. If any parameters are passed, they will also be checked for consistency. Not all parameters need to be passed, only the ones you want to check for equality.
source to share