3

I have an AngularJS site, the object-resource I want to show is:

  1. each user has a basic account, that will show in a single page (named basic-page);
  2. user has several sub-account, each sub-account will show in a diffent page (named app-page);
  3. basic-page will show the summer info about the sub-account, so app-page can share the loaded $http data of basic-page is better for code reusing.

As the purpose, I use ui-router define state below:

.state('user', {
    url: '/user/{id}',
    title: 'User-Page',
    templateUrl: helper.basepath('user.html')
})
.state('user.app', {
    url: '/{app}',
    title: 'App-Page',
    emplateUrl: helper.basepath('app.html')
})

Notice that state user.app is the child of user.

What I want is when I enter the user.app, it can reuse the data in user, ecen if it's a different page, that the user need not to contain a ui-view to include user.app's template. But actually I enter user.app, and it doesn't show the app.html(because I didn't include ui-view in user.html).

Maybe this is not the correct usage of ui-router.

So, how can I share data in different $state? Anyone can give me a detailed example? Thank you.

Improve this question

1 Answer 1

Reset to default
1

Sharing data across controllers

Any time you need to share data across states you will need to create a service/factory that you can instantiate in your controllers associated with those states.

The factory will consist of basic getters and setter for the different data you need to share. Just like when you build getters and setters in java to share across classes.

Example Code

.factory('yourFactory', function ($scope) {
  return {
    get: function () {
        return $scope.someValue;
    },
    set: function(value){
      $scope.someValue = value;
    }
  };
})

Disclaimer: I've not tested this code but it should do the job for getting and setting some values you need to access across your app.

Demo : Working plunker with this approach.

Alternative: 1

This is the "Dirty" alternative, you can set a global variable with $rootScope. It will be accessible everywhere since its global, I strongly advise you don't do this but though I would point it out to you anyway.

Alternative: 2

When a state is "active"—all of its ancestor states are implicitly active as well.So you can build your states considering the parent-child relationship and share data across scopes in hierarchical manner. Official Docs and working plunker with mentioned approach.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I've added some untested code, It should give you an idea of what to add in your project
Thank you so much for this answer. I have updated your plunkr to utilize the $http promise for the detail view. This should make the detail view bookmark safe
The factory i wrote here is wrong. You cannot use $scope in it. I've actually written a gist on git hub showing the correct way to share data but I'm only on my phone atm. Once I get to my laptop I'll update this answer complete with a link to the gist.