Issue
I’m trying to pass an object as one of the parameters to my ui-router state:
JS:
.state('graph', {
name: 'Graph',
url: "/graph?{friends}&{start}&{end}",
templateUrl: 'templates/graphs.html',
controller: 'GraphController'
})
HTML:
<a ui-sref="graph({friends: test.friends, start: test.start_date, end: test.end_date})">
My Graphs
</a>
TEST:
{
friends: {
'friend1': [MORE_DATA],
'friend2': [MORE_DATA]
},
start_date: "Jun-17",
end_date: "Jun-19"
}
However, when I try to access $stateParams
in the controller, it prints out the string "[object Object]"
. How can I get the test.friends
object to be passed through?
Solution
You can’t pass objects on the querystring so the way you have constructed the URL for your graph
state is causing the object to be converted to a string which you are seeing as [object Object]
.
What you should do instead is create params
for your state as shown below. This will allow you to pass the object and have it accessible in your controller via $stateParams
.
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('main', {
url: '/',
template: '<div><a ui-sref="graph({friends: main.friends, start: main.start_date, end: main.end_date})">Go to graph</a></div>',
controller: 'MainController as main'
})
.state('graph', {
url: '/graph',
template: '<div>Graph</div><div>{{graph.friends}}</div><div>Start: {{graph.startDate}}, End: {{graph.endDate}}',
controller: 'GraphController as graph',
params: {
friends: null,
start: null,
end: null
}
});
})
.controller('MainController', function() {
var _this = this;
_this.friends =
{
'friend1': 'friend 1',
'friend2': 'friend 2'
};
_this.start_date = "Jun-17";
_this.end_date = "Jun-19";
})
.controller('GraphController', function($stateParams) {
var _this = this;
_this.friends = $stateParams.friends;
_this.startDate = $stateParams.start;
_this.endDate = $stateParams.end;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<div ng-app="app">
<div ui-view></div>
</div>
Answered By – Lex
Answer Checked By – Dawn Plyler (AngularFixing Volunteer)