在同一控制器(ng-controller）的不同实例之间共享数据

Sharing data between different instances of the same controller (ng-controller)

本文关键字：实例 之间 共享 数据 控制器 ng-controller      更新时间：2023-09-26

我是角度的新手，正在尝试完成一项非常简单的任务，这在角度中似乎并不那么简单。

我有一些数据(为简单起见，只是一个名为var1的变量(，我在网页的一个区域修改这些数据，而我想在网页的另一个区域中显示它。

<body ng-app="app">
    <div id="div1" ng-controller="TestCtrl">
        <input type="text" ng-model="var1" /> Var1: {{ var1}}
    </div>
    <br />
    <div id="div2" ng-controller="TestCtrl">
        Var1: {{ var1 }}
    </div>
 //..

我正在相应的控制器中初始化变量：

 angular.module('app', [])
    .controller('TestCtrl', function($rootScope){
        $rootScope.var1 = 1;
        $rootScope.var2 = 2;
        this.updateValues = function() {
            srv.updateValues($rootScope.var1, $rootScope.var2);
        };
    });

现在，您可能知道，第二次将ng-controller附加到div 时，我得到了一个全新的控制器实例，该实例对我实际修改数据的第一个实例一无所知。

那么，如何在网页的另一个区域中访问第一个控制器的var1呢？

https://plnkr.co/edit/XgIWFW89tavnjOW09TBp?p=preview

  • 我想到的一件事是将TestCtrl附加到身体上，以便基本上整个网站只有一个TestCtrl实例。这是一种常见的方法吗？我已经觉得我的 90% 的控制器将附加到车身标签上。

  • 我已经阅读了使用服务的建议，老实说，我真的看不出应该如何为如此简单的场景实现这样的服务。

  • 有没有其他解决方案？

好吧，这与Miško的说法有关：

"..如果你使用ng-model，那么某处必须有一个点。如果你不这样做 有一个点，你做错了..">

简而言之，当您在第二个控制器中初始化var1时，您正在创建自己的作用域(即使您使用 $rootScope (。

而不是直接访问$rootScope：

$rootScop.var1 = 1;

尝试使用对象：

$rootScope.dataObj = {var1: 1};

https://plnkr.co/edit/oVB16H0PBLFx3PyLhuRN?p=preview

进一步阅读：

为什么 AngularJS 文档不在模型指令中使用点？

http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

https://thinkster.io/egghead/the-dot

相关文章：