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

我的代码结构是：

app.controller(AlphaCtrl, function(interstellarService){

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

})

app.controller(CentauriCtrl, function(interstellarService){

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

星际服务存储在浏览器存储中：

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

现在，当我通过setter方法更改

AlphaCtrl

的

routeToEarth

属性时，我希望CentaurtRL会相应地更新，因为每个控制器上的数据都绑定到服务，如下所示：

AlphaCtrl星际服务中心

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

这是不可行的：我想在我的半人马座HTML中使用和共享存储在

routeToEarth

中的值，例如

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

{{星际服务.地球路线}&“时间旅行”| |“虫洞”}

---

我这里缺少什么？

您需要进行某些更改才能运行它

缺少

AlphaCtrl

和

CentaurtRL

未能为

AlphaCtrl

和

centauritrl

控制器注入$scope

控制器和服务模块是不同的，您提到服务为

appServices

，控制器为

app

脚本

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>

{{星际服务.地球路由}
{{星际服务.地球路由}

将其放入我的

centauritrl

中，当我在

AlphaCtrl

中更改它时，最终显示了到地球的路线

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

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

---

向这个问题致敬：

你应该试试factory而不是OK我更新了代码，但factory仍然没有工作。你以前在你的工厂设置过吗？还有，这个表达式应该做什么？你能试着渲染一下{{interstellarService.routeToearth}}部分吗？我注意到：

app.controller

和

appServices.factory

。那么，您的工厂和控制器在不同的模块中吗？“如果是这样的话，你是否正确地注入了你的服务？”Sirbenji看一下我的回答