Bring data from one state to another


Hello guys!

I need some help, I have an app with a list of Dribbble users, using their API. When I select the user I want to bring the user detail based on the ID brought by the $stateParams.

I’m new to Angular and Ionic, a help would be awesome!
I read about services and child states, but I don’t know how to do it properly.

This is the repository:
If you guys could have a look.

Thanks you very much.


I recent wrote a pretty long stack overflow answer for this kind of problem. You want to share data in multiple places, and here are 3 ways you can do that. I would use services.

Think of a service like a piece of data that can be injected into any controller. In this case you inject the dribble user list into a controller to show the full list, then you inject the same list into another controller that shows just one user, which you use the $stateParams to search through the list to locate the specific user.


Thank you @gnomeontherun, that helped me to see what I need to do. Really good explanation.

I’m calling the person data using:



One suggestion, I would not use JSONP. It has been proven insecure and Dribble supports CORS so you shouldn’t have any trouble trying to load that data.


Thanks for the suggestion. Could you help me with the correspondent code for the $http.jsonp?
It’s my first time working with API’s and there requests, I have no idea how to turn this call to use CORS.

I read some articles, but couldn’t find something specific to my case.

Thank you again.


Sure. Don’t worry about CORS in this situation, its not something you do its something the API has to do.

Instead of using JSONP, you just use a regular GET request. This can vary from API to API, but dribble has a quality API that makes things fairly easy.

// Load the user's data
$http.get('' + $stateParams.person)
 // Chain a success callback when the data has loaded, 
 // and store the response in $scope.user
  .success(function (user) {
    $scope.user = user;
  .error(function () {
    // Oh no, handle error here


@gnomeontherun I changed to:

.success(function(res) {
// .error(function(status, err) {
//   defer.reject(status);
// });

But I’m now getting this error:

XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access. 

Do I need to config something to be able to use http.get with their API?

Thank you, again.


My bad, I forgot the https and to pass the token, now because the CORS thing, I need to register my application. All working fine now.