UI-router stateParams cloning objects? - angularjs

Question

I have this route:
{
name : 'myPage',
url : '/myPage',
views: {
'#': {
component: components.MyComponent.name
}
},
params: {
turtle: {y: 2}
},
resolve : {
turtle: function($stateParams) {
window.turtle = $stateParams.turtle;
window.daaa = $stateParams;
return $stateParams.turtle;
}
}
}
I have this component binding def:
bindings: {
turtle: '<'
}
and the constructor of MyComponent's controller:
class MyComponentController {
let self = this;
this.$onInit = function() {
console.log("-----")
console.log("window.turtle: " + JSON.stringify(window.turtle))
console.log("self.turtle: " + JSON.stringify(self.turtle))
console.log("window.turtle == self.turtle: " + (window.turtle == self.turtle))
console.log("window.turtle == self.$stateParams.turtle: " + (window.turtle == self.$stateParams.turtle))
console.log("window.daaa == self.$stateParams: " + (window.daaa == self.$stateParams))
console.log("-----")
}
}
It prints:
-----
window.turtle: {y:2}
self.turtle: {y:2}
window.turtle == self.turtle: true
window.turtle == self.$stateParams.turtle: false
window.daaa == self.$stateParams: false
-----
This is really strange to me..., made me think that once you're inside a state, UI-router makes a clone of $stateParams (so the $stateParams you see inside the resolves != $stateParams you see in the controller)... and it also makes a clone of each declared params (deep clone???).
I wasn't expecting that. Is it a bug? or a feature (maybe protection mechanism?). Who is the culpable here? UI-router? Or is it angular 1.5 component (with its isolated scope stuffs)?
Thanks in advance for helping me clarify this.

Answer 1

According to ui-router source code (was linked by Daniel here) $stateParams is deprecated and it's advised to use $transition$ injectable instead (see ui-router docs on $transition$)
Here's an example of using it in a resolve function:
$stateProvider.state('a-route', {
// ...
// define params for route
params: {
data: null
},
// set up data to resolve to params.data
resolve: {
data: ($transition$) => {
return $transition$.params().data;
}
}
})
Please, see working example here:
http://jsbin.com/velekot/edit?js,output
NOTE: Docs also claim that one can inject the $transition$ to a controller, but I couldn't make it work, so used a resolve fn.