6

我想在页面的两个位置之间共享一个控制器的数据。例如：

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

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

JSFiddle在这里：http: //jsfiddle.net/LETAd/

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

谢谢！

4

2 回答 2

4

要在控制器之间共享数据，通常服务是您的最佳选择。将共享数据放入服务，并将服务注入控制器：

function myController($scope, MyService) {

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

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

这是一个小提琴（不是我写的），展示了两个控制器如何共享数据。

另请参阅AngularJS：如何在控制器之间传递变量？和
Angularjs：两种方式数据绑定和控制器重载。

于 2013-03-08T17:28:21.790 回答
3

理想情况下，您应该只在一个页面中运行一个应用程序。由于您还需要在控制器之间进行通信，因此您应该真正运行单个应用程序。可能在body或html。然后你可以创建一个主控制器来封装你的所有控制器。（控制器继承）。

这是它的样子：

<html ng-app="myApp">
  <head>...</head>
  <body ng-controller="MainCtrl">
    <div ng-controller="MyCtrl">
      <input type="text" ng-model="mainView.x" /> {{x}}
    </div>
    <div ng-controller="MyCtrl">
      <input type="text" ng-model="mainView.x" /> {{x}}
    </div> 
  </body>

和 JS：

function MainCtrl($scope) {
  $scope.mainView = {};
}
function MyCtrl($scope) {

}

我们在 MainController 上创建了一个 mainView 对象，并且由于 MyController 及其作用域原型继承自 MainController，我们可以实现它。
您应该注意一个警告，当您使用 时ngModel，几乎总是最好在某处有一个点（从 angularjs 的作者转述）。

由于 javascript 的原型继承：

// In MainCtrl
$scope.mainView.x = "hello";
$scope.myX = "hello";

// In MyCtrl
$scope.mainView.x
>> "hello"
$scope.myX
>> "hello"
$scope.mainView.x = "welcome";
$scope.myX = "welcome";

// In MainCtrl
$scope.mainView.x
>> "welcome"
$scope.myX
>> "hello"

当您在 javascript 中请求对象中的属性时，它会查看其属性以查看是否有一个，如果没有，它会在原型链（父级）中向上，并在那里查找它，它会一直向上直到找到任何或位于原型链的末端。

因此，当我们设置 时$scope.myX，我们实际上并没有myX在父范围内更改，而是myX在当前范围内创建了一个名为的属性；因为原型中的层次结构。但是，当我们设置 $scope.mainView.x 时，我们首先要求 mainView 然后设置x，然后导致更改父范围中的值。

我知道这感觉与最初的问题无关，但是当一个人进入控制器和范围继承时，肯定会遭受这种痛苦。

于 2013-03-08T21:10:11.233 回答