Share $Scope data between States

Question

I am trying access the parent state from a child. I tried this but it doesn't work.

angular.module('myApp').controller('compareCtrl', ['$scope',
    function($scope) {
 $scope.test=$scope.$parent.services;

app.coffee

angular
  .module('myApp', ['ngAnimate', 'ngCookies', 'ngResource'
                  , 'ui.router', 'ngSanitize', 'ngTouch'])
  .config ($stateProvider) ->
    $stateProvider.state('home',
      url: "/"
      templateUrl: "home.html"
    ).state('services',
      url: "/services"
      templateUrl: "services/list.html"
    ).state('services.detail',
      url: "/detail/"
      templateUrl: "detail.html"
    ).state('services.compare',
      url: "/compare/"
      templateUrl: "compare.html"
    )

Shared data should be in a service my friend. You never know at what level in scope hierarchy will the actual data reside. Or it maybe in a different hierarchy altogether. — Chandermani, Jun 18 '15 at 22:34

score 1 · Accepted Answer · edited May 23 '17 at 11:59

UI-Router supports data (Model) sharing among state families. The detailed explanation could be found here

How do I share $scope data between states in angularjs ui-router?

Where we can see, that we need to introduce a Model, a cluster, a reference object.

// controller of the parent state 'services'
.controller('ServicesCtrl', ['$scope',
    function($scope) {
        $scope.Model = { prop1 : value1, ...};
}])

Because now each child state will prototypically inherit that reference to $scope.Model... we can access it in any child state controller

.controller('ServiceChildCtrl', ['$scope',
    function($scope) {
        $scope.Model.prop1 = differentValue;
}])

Check it in action in this working plunker

Share $Scope data between States

1 Answers1

Linked