Share data between two ui-views inside a state in angularjs ui-router

Question

I'm using angular-ui ui-router for a web-app. I have a state/view configuration like this:

...
.state('parentState', {
    url:'/:id',
    views: {
        'main@parent': {
            controller: 'ParentMainCtrl',
        },
        'sub@parent': {
            controller: 'ParentSubCtrl',
        },
    },
})
...

Now, I need to share data between the two states, main and sub. One way is to add a resolve to parentState and inject the dependency into the controllers of the views, but then I won't be able to do a data-binding between the two views. I tried adding a data attribute to parentState, but seems the children views do not inherit it. What would be a way to do a two-way data binding between the sibling views inside this state?

Another approach would be to create a service that holds the data and inject the service into both controllers - have a look at stackoverflow.com/questions/21919962/… — glendaviesnz
– glendaviesnz, Commented Aug 9, 2014 at 7:59
Here is a working demo, without the mistake of using $watch in the controllers. stackoverflow.com/questions/21904174/… — cheekybastard
– cheekybastard, Commented Aug 10, 2014 at 1:31

Cameron Wilby · Accepted Answer · 2015-03-11 01:12:54Z

In my opinion, view routers shouldn't be responsible for data.

You should create a service that contains your data and operations to modify that data, then inject that service into your two controllers.

The nice thing about this too is that if you wanted to share this data source with even more modules besides ParentMainCtrl and ParentSubCtrl, you could add the service as a dependency to those modules.

var myApp = angular.module('myApp', []);

angular.module('myApp').factory('sharedService', ['$http',
  function($http) {
    return {
      data: {},

      // functions to get/set properties in data
    }
  }
]);

angular.module('myApp').controller('ParentMainCtrl', ['$scope', 'sharedService',
  function($scope, sharedService) {
    $scope.data = sharedService.data;
  }
]);

angular.module('myApp').controller('ParentSubCtrl', ['$scope', 'sharedService',
  function($scope, sharedService) {
    $scope.data = sharedService.data;
  }
]);

http://plnkr.co/edit/WHIWUQRJNAmhQQKKJDDl?p=preview

What if a data is selected on a view, that needs to be passed to another view? Considering this solution the sharedService.data must be already available.

Collectives™ on Stack Overflow

Share data between two ui-views inside a state in angularjs ui-router

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related