javascript AngularJS：如何在两个独立控制器和共享服务之间创建双向数据绑定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23756631/
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
AngularJS : How to create a two-way data binding between two isolated controllers and a shared service?
提问by akashivskyy
I am trying to create a two-way data binding between two isolated controllers and a shared service (which provides another isolated scope):
我正在尝试在两个独立控制器和共享服务（提供另一个独立范围）之间创建双向数据绑定：
app.factory("sharedScope", function($rootScope) {
var scope = $rootScope.$new(true);
scope.data = "init text from factory";
return scope;
});
app.controller("first", function($scope, sharedScope) {
$scope.data1 = sharedScope.data;
});
app.controller("second", function($scope, sharedScope) {
$scope.data2 = sharedScope.data;
});
Fiddle: http://jsfiddle.net/akashivskyy/MLuJA/
小提琴：http: //jsfiddle.net/akashivskyy/MLuJA/
When the application launches, data1and data2are correctly updated to the init text from factory, but later, if I change any of them, those changes are not reflected throughout those three scopes.
当应用程序启动data1并data2正确更新到init text from factory，但稍后，如果我更改其中任何一个，这些更改不会反映在这三个范围内。
How can I bind them?
我怎样才能绑定它们？
P.S. If there's a better way than returning a scope and still having access to event and observing functionalities (without basically re-writing them), let me know. :)
PS如果有比返回范围更好的方法并且仍然可以访问事件和观察功能（基本上不用重写它们），请告诉我。:)
回答by link
Fixed it. References will be lost if you are using primitives, as in your fiddle.
解决它。如果您使用原语，引用将丢失，就像在您的小提琴中一样。
Check this:
检查这个：
app.factory("sharedScope", function($rootScope) {
var scope = $rootScope.$new(true);
scope.data = {text: "init text from factory"};
return scope;
});
app.controller("first", function($scope, sharedScope) {
$scope.data1 = sharedScope.data;
});
app.controller("second", function($scope, sharedScope) {
$scope.data2 = sharedScope.data;
});
回答by Owen
Yet another fun bit: In this case, you don't need to inject $scope or $rootScope. The following code works if you utilize Controller As. Check the Fiddle
另一个有趣的地方：在这种情况下，您不需要注入 $scope 或 $rootScope。如果您使用 Controller As，以下代码有效。检查小提琴
var app = angular.module("app", []);
app.factory("sharedScope", function() {
var _this = this;
_this.data = {text: "init text from factory"};
return _this;
});
app.controller("first", function(sharedScope) {
var _this = this;
_this.data1 = sharedScope.data;
});
app.controller("second", function(sharedScope) {
var _this = this;
_this.data2 = sharedScope.data;
});
For even more fun, consider controllers, services, and factories as classes. More Fiddles
为了更有趣，可以将控制器、服务和工厂视为类。 更多小提琴
var app = angular.module("app", []);
var SharedScope = function(){
var _this = this;
_this.data = {text: "init text from factory"};
return _this;
};
app.factory("sharedScope", SharedScope);
var First = function(sharedScope){
var _this = this;
_this.data1 = sharedScope.data;
};
var Second = function(sharedScope){
var _this = this;
_this.data2 = sharedScope.data;
};
First.$inject = ['sharedScope'];
Second.$inject = ['sharedScope'];
app.controller("first", First);
app.controller("second", Second);
I've been playing at implementing Josh Carroll's Guidelines to Avoid "Scope Soup"
我一直在努力实施 Josh Carroll 的避免“Scope Soup”的指导方针
回答by stefan
JavaScript passes objects by reference, so all scopes will point to the same object. Why not just do this?
JavaScript 通过引用传递对象，因此所有作用域都将指向同一个对象。为什么不这样做呢？
app.factory("sharedData", function() {
return {data: "init text from factory"};
});
app.controller("first", function($scope, sharedData) {
$scope.sharedData = sharedData;
});
app.controller("second", function($scope, sharedData) {
$scope.sharedData = sharedData;
});
and in your view:
在您看来：
<p>{{sharedData.data}}</p>
