AngularJS：在页面的两个不同而非嵌套部分共享同一控制器的数据_Angularjs

AngularJS：在页面的两个不同而非嵌套部分共享同一控制器的数据

angularjs

AngularJS：在页面的两个不同而非嵌套部分共享同一控制器的数据,angularjs,Angularjs,我想在我的页面中的两个位置之间共享一个控制器的数据。例如： {{x} {{x} 当然，这是： var myApp=angular.module（'myApp'，[]）； myApp.controller（'myController'，函数（$scope）{ $scope.x='test'； }); 我能做些什么，无论我键入什么，第一个输入文本都会反映在第二个输入文本中？反之亦然？基本上相同的数据被传播到这两个部分，同时保持数据的单个副本请点击此处： PS：如果这有任何关系，我会手动引导它

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


{{x}
{{x}

当然，这是：

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myController'，函数（$scope）{
$scope.x='test'；
});

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

请点击此处：

PS：如果这有任何关系，我会手动引导它

谢谢

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

function myController($scope, MyService) {

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

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

这里有一个（我没有写）演示两个控制器如何共享数据

另请参见和

，理想情况下，在一个页面中应该只运行一个应用程序。由于还需要在控制器之间进行通信，因此实际上应该运行单个应用程序。可能在

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>

我们在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

，然后设置

，这将导致更改父范围中的值

我知道这感觉有点与最初的问题无关，但当我们进入控制器和范围继承时，肯定会遇到这种情况。

嗨，马克，谢谢你的回答！但是，我用于引导此应用程序的元素并不包含所有控制器引用。一个更具体的例子是，是否有一种方法将

#a1

中当前链接的控制器与

#a2

中的控制器链接起来？谢谢@Mihai，对不起，我错过了你的页面上有两个应用的事实。看看这是否有帮助：@Mihai，这里有一个更接近的东西：但是你必须点击另一个应用中的“runDigest”按钮，让另一个应用注意到模型的变化。为了使其实际工作，不知何故，正在更改其模型的应用程序需要调用一些（全局定义的）方法，然后在另一个应用程序上调用$rootScope.$digest（）。您好，fastreload，您的想法似乎很有趣，但我想将它们保存在单独的DOM树中。我的DOM非常大，我不喜欢所有的角度解析（我这里考虑的是性能），其中99%与角度无关。好吧，你不能以这种方式实现你想要的结果。您可以使用ngRoute使用

$on

、

$broadcast

和`angular.element（#otherApp）.scope（）”来暗示具有多个控制器。不可能总是只有一个。我用一个额外的div和angular.element解决了同样的问题。我给你一个JsFiddle，因为这个问题无法回答，因为它被错误标记为重复

// 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"