Javascript AngularJS：如何在两个独立的控制器和共享服务之间创建双向数据绑定？

我正在尝试在两个隔离控制器和共享服务（提供另一个隔离作用域）之间创建双向数据绑定：

小提琴：

当应用程序启动时，

data1

和

data2

被正确地从工厂更新为

init文本

，但是稍后，如果我更改其中任何一个，这些更改都不会反映在这三个范围内

我怎样才能把它们绑起来

---

另外，如果有比返回一个作用域并仍然可以访问事件和观察功能更好的方法（基本上不需要重新编写它们），请告诉我。：）

修复了它。如果使用原语，引用将丢失，就像在小提琴中一样

选中此项：

---

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;
});

在你看来：

<p>{{sharedData.data}}</p>

{{sharedData.data}

还有一个有趣的地方：在这种情况下，您不需要注入$scope或$rootScope。如果将控制器用作，则以下代码有效。 检查

更有趣的是，将控制器、服务和工厂视为类。

---

我一直在努力实现Josh Carroll的

我认为使用对象还是原语无关紧要。谢谢！：）这不是AngularJS的问题，而是一个通用Javascript编程问题。无论如何，欢迎您：）多做一点工作来创建一个新的范围有什么好处？这最终会影响性能吗？为什么不让工厂返回一个共享的对象呢？因此，完全相同的代码，只需返回{text:“init text from factory”}，而不是将其包装在范围内？@stefan当然，你是对的。OP可以通过使用服务和避免创建新的作用域来实现同样的效果。无论如何，我没有指出它，因为它超出了这个问题的范围（lol）。@stefan，这不仅是一个性能上的打击，而且不断定义新的范围可能会导致一个麻烦的世界。正如我在下面对答案的评论中提到的，子作用域将继承自父作用域。在控制器中定义控制器将导致父/子关系。如果我没有弄错的话，即使在视图中定义变量，也会为控制器的父范围创建一个子范围。看看Josh Carroll在Angular中关于“Scope Soup”的文章，所有$scopes都不指向同一个对象$rootScope在整个过程中都是相同的，但是在一个控制器中创建的$scope与在不同控制器中创建的$scope不同。此外，为了使水更加浑浊，视图中控制器（1）内的控制器（2）可以继承父控制器（1）的属性，但父控制器（1）无法看到子控制器（2）的属性。阅读更多内容：@Owen，$scopes指向同一个对象不是重点，而是服务

sharedData

是一个单例，因此所有引用它的作用域都指向相同的数据。谢谢！这正是我想听到的，这似乎没有被谈论太多。从v1.2.x开始，您不需要$scope，最近几本书中提到了这一点，他们正试图摆脱它。感谢您提供“范围汤”的链接。这个答案应该得到比现在更多的支持票。我认为你最好对你的

共享范围
使用
.service（）
，而不是
.factory（）
，因为你把它当作构造函数来使用。我不太确定，但我认为有可能将
\u this.data
绑定到全局对象（
窗口
）。
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;
});

<p>{{sharedData.data}}</p>

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;
});

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);