AngularJS:在页面的两个不同的非嵌套部分共享同一个 Controller 的数据

Question

我想在页面的两个位置之间共享一个 Controller 的数据。例如:

<div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="x" /> {{x}}
    </div>
</div>
<!-- these are in totally different places and I do not want, nor can't nest them -->
<div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="x" /> {{x}}
    </div>
</div>

当然，这个:

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
    $scope.x = 'test';
});

我该怎么做，无论我输入什么，第一个输入文本都会反射(reflect)在第二个中？反之亦然？基本上相同的数据被传播到这两个部分，同时保持数据的单个副本。

JSFiddle: http://jsfiddle.net/LETAd/

PS:我手动引导它，如果这有任何相关性。

谢谢!

Answer 1

要在 Controller 之间共享数据，通常服务是您的最佳选择。将共享数据放入服务，并将服务注入(inject) Controller :

function myController($scope, MyService) {

然后每个作用域/ Controller 实例将能够访问共享数据。

请注意，服务是单例的，因此您的共享数据只有一个实例。

这是 fiddle (不是我写的)展示了两个 Controller 如何共享数据。

另见 AngularJS: How can I pass variables between controllers?和 Angularjs: two way data bindings and controller reload .