Angular.js：跨多个控制器的双向数据绑定

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, eg

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

What am I missing here?

Answer 1

You need to make certain changes to get it run.

1. missing of quotes for AlphaCtrl and CentauriCtrl
2. missed to inject $scope for both the AlphaCtrl and CentauriCtrl controllers
3. 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>

Answer 2

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