javascript - 在同一 Controller 的不同实例之间共享数据(ng-controller)

标签 javascript angularjs

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

我有一些数据(为了简单起见,只是一个名为 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>

 //..

我正在初始化相应 Controller 中的变量:

 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 时,我得到了一个全新的 Controller 实例,它对我实际修改的第一个实例一无所知数据。

那么如何在网页的另一个区域访问第一个 Controller 的 var1 呢?

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

  • 我想到的一件事是将 TestCtrl 附加到正文,以便基本上整个网站只有一个 TestCtrl 实例。这是一种常见的方法吗?我已经感觉到我的 90% 的 Controller 都会附加到 body 标签。

  • 我已经阅读了使用服务的建议,说实话,我真的不明白这样一个简单的场景应该如何实现这样的服务。

  • 还有其他解决方案吗?

最佳答案

好吧,这与 Miško 的说法有关:

"..if you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong.."

简而言之,当您在第二个 Controller 中初始化 var1 时,您正在创建自己的作用域(即使您使用的是 $rootScope)。

而不是直接访问$rootScope:

$rootScop.var1 = 1;

尝试使用对象:

$rootScope.dataObj = {var1: 1};

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

进一步阅读:

Why don't the AngularJS docs use a dot in the model directive?

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

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

关于javascript - 在同一 Controller 的不同实例之间共享数据(ng-controller),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35126078/

相关文章:

javascript - 如何计算 UI-Angular 和 Bootstrap 中的字符数

javascript - forEach循环分配相同的随机数

angularjs - 如何取消 RestAngular promise .then()?

javascript - $modal 弹出函数中的范围值未定义为对象

javascript - 如何让 Google 索引 Angular.js 应用程序中的动态标题

angularjs - 如何将多个 TypeScript 模块打包成组进行组织

javascript - 如何只保存 Canvas 的图像而不是所有 Canvas

javascript - 当用户单击提交按钮时,如何为变量分配任意值?

javascript - 如何检查 JavaScript 文件是否尚未加载或正在加载

angularjs - 带有 AngularJS 过滤器和 Angular-ui 高亮的 Ng-bind-html