Angular.js: Two-Way data binding across multiple controllers

Question

I have this code structure in Angular:

app.controller(AlphaCtrl, function(interstellarService){

  $scope.interstellarService = {
    routeToEarth: interstellarService.get('routeToEarth'),
  }

})

app.controller(CentauriCtrl, function(interstellarService){

  $scope.interstellarService = {
    routeToEarth: interstellarService.get('routeToEarth'),
  }
})

The Interstellar Service stores in the Browser storage:

appServices.factory('interstellarService', function ($rootScope, $localStorage){
    return {
        set: function(entidy, value) {
            $localStorage[entidy] = value;
        },
        get: function(entidy) {
           if ($localStorage[entidy] !== undefined) {
              return $localStorage[entidy];
           } else return false;
        }
    }
});

Now when I change in the AlphaCtrl the routeToEarth property via a setter method I expect the CentauriCtrl to update accordingly, because the data is bound at each controller to the service, as in:

AlphaCtrl <-- data --> interstellarService <-- data --> CentauriCtrl

This is what does not work: I want to use and share the value stored in routeToEarth in my Centauri-HTML, e.g.

<li>
  <a>
    {{interstellarService.routeToearth}} && 'Timetravel' || 'Wormhole' }}
  </a>
</li>

What am I missing here?

did you set it before in your factory? also, what is this expression supposed to do? can you try just rendering the {{interstellarService.routeToearth}} part? — tmaximini
– tmaximini, Commented Oct 17, 2014 at 9:59
I notice this: app.controller and appServices.factory. So are ur factory and controller in different module? If so, did you inject ur sevice properly? — khemry
– khemry, Commented Oct 17, 2014 at 10:02

Nidhish Krishnan · Accepted Answer · 2014-10-17 11:27:09Z

You need to make certain changes to get it run.

missing of quotes for AlphaCtrl and CentauriCtrl
missed to inject $scope for both the AlphaCtrl and CentauriCtrl controllers
controllers and service modules were different, you mentioned it as appServices for service and app for controllers

Working Demo

Script

var appServices = angular.module('app', ['ngStorage']);

appServices.factory('interstellarService', function ($rootScope, $localStorage) {
    return {
        set: function (entidy, value) {
            $localStorage[entidy] = value;
        },
        get: function (entidy) {
            if ($localStorage[entidy] !== undefined) {
                return $localStorage[entidy];
            } else return false;
        }
    }
});

appServices.controller('AlphaCtrl', function (interstellarService, $scope) {
    interstellarService.set('routeToEarth', 'Alpha');
    $scope.interstellarService = {
        routeToEarth: interstellarService.get('routeToEarth'),
    }
    console.log('AlphaCtrl value::', $scope.interstellarService);
})

appServices.controller('CentauriCtrl', function (interstellarService, $scope) {
    interstellarService.set('routeToEarth', 'Centauri');
    $scope.interstellarService = {
        routeToEarth: interstellarService.get('routeToEarth'),
    }
    console.log('CentauriCtrl value::', $scope.interstellarService);
})

Html

<div ng-controller="AlphaCtrl">
    {{interstellarService.routeToEarth}}
</div>
<div ng-controller="CentauriCtrl">
    {{interstellarService.routeToEarth}}
</div>

Community · Accepted Answer · 2017-05-23 12:00:35Z

0

Putting this into my CentauriCtrl finally showed the route to earth immeadiately when I change it in AlphaCtrl.

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){

         $scope.interstellarService = {
             routeToEarth: interstellarService.get('routeToEarth'),
         }
    });

Tribute to this SO Question: AngularJS Bootstraps Navbar

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 17, 2014 at 12:23

Cloudscape Germany

15.9k15 gold badges96 silver badges158 bronze badges

Collectives™ on Stack Overflow

Angular.js: Two-Way data binding across multiple controllers

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related