javascript - $scope 和此技术在通过服务共享数据方面有何不同？

Question

如果您要创建新代码，请不要更改原始的 jsbins

我正在用 Angular 1 编写一个应用程序。现在我需要创建一个可以注入(inject)多个 Controller 的服务。我还需要数据在各个 Controller 中可以更改，但反射(reflect) Controller 之间的更改。所以我想我想要的是具有两种方式绑定(bind)的全局值。我一直在使用“var vm = this”技术而不是使用 $scope。我读到除了语法之外它们本质上是相同的。但我有两个示例，它们具有相同的目标，却产生了不同的结果。

他们都共享此服务:

var app = angular.module('myApp', []);

app.service('sharedProperties', function() {
    var stringValue = 'test string value';
    var objectValue = {
        data: 'test object value'
    };

    return {
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;
        },
        getObject: function() {
            return objectValue;
        }
    }
});

我设置了两个 jsbin 来显示它们的功能。

这是“这个”示例: http://jsbin.com/conidesuni/edit?html,js,output

这是 $scope 示例: http://jsbin.com/gobodutaje/edit?html,js,output

有两种输入源，一种绑定(bind)到 objectValue，另一种绑定(bind)到 objectValue 和 stringValue。在设置这两个值的输入中，调用服务的设置函数。

区别在于 $scope 似乎绑定(bind)了 Controller 2 中的两个绑定(bind) div，但“this”示例并没有这样做。当尝试同时更改两个值(stringValue 和 objectValue)时，此示例不会更改任何值。它在控制台中打印未定义。

这两种技术都不会导致 Controller 2 中的输入更改 Controller 1 中的 div，尽管它们共享服务。

我想知道如何通过 Controller 以两种方式进行这些绑定(bind)，以及“this”示例和 $scope 示例所发生的情况之间到底有什么区别。

Answer 1

基本上 $scope 和 this 与您在问题中所述相同。

当您在模板中检索 ControllerAs(myController2 as cont2) 时，您想要从模板访问到 Controller 的所有内容(变量和函数)都必须具有前缀 cont2.

在你的第一个 jsbin 中，您在调用 cont2.setString(newValue) 时错过了一个前缀 cont2，它应该是 cont2.setString(cont2.newValue)。否则您无法传递在文本框中输入的内容。

<小时/>

更新:

通常情况下，如果sharedService的值发生变化，我们必须手动调用服务函数来获取新值，正如@Sumit Deshpande所回答的那样。

还有另一种方法可以将相同的对象实例绑定(bind)到 Controller 的变量，并将对象实例保存在sharedService中，但请记住，这种方式不支持字符串类型的字段(除非您也将字符串归档到对象归档中)。

引用下面 plunker 。