javascript 我在 AngularJS 中有两个具有相同 ng-controller 的 div，如何让它们共享信息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15170464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I have two divs with the same ng-controller in AngularJS, how can I make them share information?
提问by LAT
I have two different div tags in my html code referencing the same controller in AngularJS. What I suspect is that since these divs aren't nested they each have their own instance of the controller, thus the data is different in both.
我的 html 代码中有两个不同的 div 标签，它们引用了 AngularJS 中的同一个控制器。我怀疑的是，由于这些 div 不是嵌套的，因此它们每个都有自己的控制器实例，因此两者的数据都不同。
<div ng-controller="AlertCtrl">
<ul>
<li ng-repeat="alert in alerts">
<div class="span4">{{alert.msg}}</div>
</li>
</ul>
</div>
<div ng-controller="AlertCtrl">
<form ng-submit="addAlert()">
<button type="submit" class="btn">Add Alert</button>
</form>
</div>
I know this could easily be fixed by including the button in the first div but I feel this is a really clean and simple example to convey what I am trying to achieve. If we were to push the button and add another object to our alerts array the change will not be reflected in the first div.
我知道这可以通过在第一个 div 中包含按钮来轻松解决，但我觉得这是一个非常干净和简单的例子来传达我想要实现的目标。如果我们按下按钮并将另一个对象添加到我们的警报数组中，则更改将不会反映在第一个 div 中。
function AlertCtrl($scope) {
$scope.alerts = [{
type: 'error',
msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
type: 'success',
msg: 'Well done! You successfully read this important alert message.'
}];
$scope.addAlert = function() {
$scope.alerts.push({
type: 'sucess',
msg: "Another alert!"
});
};
}
回答by Caio Cunha
This is a very common question. Seems that the best way is to create a service/value and share between then.
这是一个很常见的问题。似乎最好的方法是创建服务/价值并在两者之间共享。
mod.service('yourService', function() {
this.sharedInfo= 'default value';
});
function AlertCtrl($scope, yourService) {
$scope.changeSomething = function() {
yourService.sharedInfo = 'another value from one of the controllers';
}
$scope.getValue = function() {
return yourService.sharedInfo;
}
}
<div ng-controller="AlertCtrl">{{getValue()}}</div>
<div ng-controller="AlertCtrl">{{getValue()}}</div>
回答by Z. Khullah
If I understand the question correctly, you want to sync two html areas with the same controller, keeping data synced.
如果我正确理解了这个问题，你想用同一个控制器同步两个 html 区域，保持数据同步。
since these divs aren't nested they each have their own instance of the controller, thus the data is different in both
由于这些 div 不是嵌套的，因此它们每个都有自己的控制器实例，因此两者的数据都不同
This isn't true, if you declare the controllers with the same alias (I'm using more recente angular version):
事实并非如此，如果您使用相同的别名声明控制器（我使用的是最近的角度版本）：
<div ng-controller="AlertCtrl as instance">
{{instance.someVar}}
</div>
<div ng-controller="AlertCtrl as instance">
{{instance.someVar}} (this will be the same as above)
</div>
However, if you WANT them to be different and comunicate each other, you will have to declare different aliases:
但是，如果您希望它们不同并相互通信，则必须声明不同的别名：
<div ng-controller="AlertCtrl as instance1">
{{instance1.someVar}}
</div>
<div ng-controller="AlertCtrl as instance2">
{{instance2.someVar}} (this will not necessarily be the same as above)
</div>
Then you can use services or broadcasts to comunicate between them (the second should be avoided, tough).
然后你可以使用服务或广播在它们之间进行通信（第二个应该避免，强硬）。
