Angular.js: двухсторонняя привязка данных между несколькими контроллерами

Question

у меня есть этот код в структуре Угловой:

app.controller(AlphaCtrl, function(interstellarService){ 

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

}) 

app.controller(CentauriCtrl, function(interstellarService){ 

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

хранит Interstellar обслуживания в хранилище браузера:

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; 
     } 
    } 
}); 

Теперь, когда я изменяю в AlphaCtrl свойство routeToEarth с помощью метода setter. Я ожидаю, что CentauriCtrl обновится соответствующим образом, поскольку данные привязаны к каждому контроллеру к сервису, как в:

AlphaCtrl < - данные -> interstellarService < - данные -> CentauriCtrl

Это то, что не работает: я хочу использовать и передавать значение, хранящееся в routeToEarth в моей Приме-HTML, например

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

Что мне здесь не хватает?

Answer 1

Вам необходимо внести определенные изменения, чтобы запустить его.

1. хватает цитат для AlphaCtrl и CentauriCtrl
2. пропустил впрыснуть $ простор для обоих AlphaCtrl и CentauriCtrl контроллеров
3. контроллеры и сервисные модули были разные, вы упомянули, как appServices для обслуживания и app для контроллеров

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

Подставляя это в мой CentauriCtrl наконец показал путь к земле immeadiately, когда я изменить его в AlphaCtrl.

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

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

Дань этому С.О. Вопрос: AngularJS Bootstraps Navbar