相同的控制器的不同实例之间共享数据(纳克控制器) [英] Sharing data between different instances of the same controller (ng-controller)
问题描述
我是新来的角,我试图完成一个非常简单的任务,这似乎不那么简单的角度。
I'm new to angular and am trying to accomplish a very simple task, which doesn't seem to be that simple in angular.
我有一些数据(只是一个变量名为 VAR1 为简单起见),我正在修改中的网页的一个区域,而我想在网页的其他区域来显示它。
I am having some data (just a variable named var1 for simplicity), that I'm modifying in one area of the webpage while I want to display it in another area of the webpage.
<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>
//..
和我初始化变量相应的控制器:
And I am initializing the variable in the corresponding controller:
angular.module('app', [])
.controller('TestCtrl', function($rootScope){
$rootScope.var1 = 1;
$rootScope.var2 = 2;
this.updateValues = function() {
srv.updateValues($rootScope.var1, $rootScope.var2);
};
});
现在,你可能知道,我第二次附上 NG-控制器
来一个div,我得到的控制器的一个全新的实例,一无所知首先在这里我实际修改的数据。
Now, as you probably know, the second time I attach the ng-controller
to a div, I get a completely new instance of the controller which knows nothing about the first instance where I actually modified the data.
所以,我怎么能访问的第一个控制器的 VAR1
,在网页的另一个领域?
So how can I access the var1
of the first controller, in another area of the webpage?
https://plnkr.co/edit/XgIWFW89tavnjOW09TBp?p=$p$ PVIEW
-
这使我想起一件事,是将
TestCtrl
附着到人体那么,基本上整个网站只有一个实例的TestCtrl
。这是一种常见的做法?我已经觉得,90%我的控制器将被贴在身上的标签。
One thing which comes to my mind, would be to attach the
TestCtrl
to the body so that basically the whole website has only one instance of theTestCtrl
. Is this a common approach? I already feel that 90% of my controllers will be attached to the body tag.
我已经阅读使用服务的建议,说实话,我真的没有看到这样的服务应该这样一个简单的场景来实现。
I already read the suggestion of using services and to be honest, I don't really see how such a service should be implemented for such a simple scenario.
有另一种解决方案?
推荐答案
OK,这是关系到MISKO的说法:
OK, this is related to Miško's saying:
..如果你使用NG-模式必须有一个点的地方。如果你不这样做
有一个点,你就错了。
"..if you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong.."
总之,当你在初始化 VAR1
第二控制器,你创建你自己的范围(甚至当你使用 $ rootScope
)。
In short, when you are initializing var1
in the second controller, you are creating your own scope (even when you're using $rootScope
).
而不是访问的 $ rootScope
直接
$rootScop.var1 = 1;
尝试使用一个对象:
Try to use an object:
$rootScope.dataObj = {var1: 1};
https://plnkr.co/edit/oVB16H0PBLFx3PyLhuRN?p=$p$ PVIEW
有关进一步阅读:
http://jimhoskins.com/2012/12/ 14 /嵌套范围 - 在angularjs.html
https://thinkster.io/egghead/the-dot
这篇关于相同的控制器的不同实例之间共享数据(纳克控制器)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!