$scope 和这种技术在通过服务共享数据方面有何不同? [英] How do $scope and this techniques differ in terms of sharing data via services?

问题描述

如果你要创建新的代码，请不要改变原来的jsbins

我正在用 angular 1 编写一个应用程序.现在我需要创建一个可以注入多个控制器的服务.我还需要数据在各种控制器中是可更改的，但要反映跨控制器的更改.所以我想我想要的是具有 2 路绑定的全局值.我一直在使用var vm = this"技术而不是使用 $scope.我读过它们除了语法之外基本上是相同的.但是我有两个具有相同目标的示例，但它们会产生不同的结果.

I am writing an app in angular 1. Right now I need to create a service I can inject in multiple controllers. I also need the data to be changeable in the various controllers but reflect the changes across the controllers. So I guess what I want are global values that have 2 way binding. I have been using a "var vm = this" technique instead of using $scope. I've read that they are essentially the same aside from syntax. But I have two examples with the same goal in mind creating different results.

他们都共享这项服务:

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 来显示它们的功能.

I have set up two jsbin's to display their functionality.

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

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

Here's the $scope example: http://jsbin.com/gobodutaje/edit?html,js,output

有两个输入源，一个绑定到 objectValue，另一个绑定到 objectValue 和 stringValue.在设置这两个值的输入中，调用了服务的 set 函数.

There are two sources of inputs, one binded to the objectValue and another binded to both the objectValue and stringValue. In the input that sets both values, the service's set function is called.

不同之处在于 $scope 似乎绑定了控制器 2 中的两个绑定 div，但this"示例并没有这样做.本示例在尝试同时更改两个值(stringValue 和 objectValue)时不会更改任何值.它在控制台中打印 undefined.

The difference is that $scope seems to bind across the two binded divs in controller two, but the "this" example isn't doing that. The this example is not changing any values when attempting to change both values at the same time (stringValue and objectValue). It prints undefined in the console.

尽管它们共享一个服务，但两种技术都不会导致控制器 2 中的输入改变控制器 1 中的 div.

Neither techniques cause the input in controller2 to change the divs in controller1 despite them sharing a service.

我想知道如何在控制器之间以两种方式进行这些绑定，以及this"示例和 $scope 示例发生的事情之间究竟有什么区别.

推荐答案

基本上 $scope 和 this 与您在问题中陈述的内容相同.

Basically $scope and this are the same thing as you stated at your question.

当您在模板中检索 ControllerAs(myController2 as cont2) 时，您希望从模板到控制器访问的所有内容(变量和函数)都必须具有 <代码>cont2.

When you retrieve ControllerAs(myController2 as cont2) in your template, everything(variables and functions) you want to access from template to controller must have a prefix of cont2.

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

And in your first jsbin, you have missed one prefix cont2 at calling cont2.setString(newValue) and it should be cont2.setString(cont2.newValue). else you can't pass what you have typed at the textbox.

UPD:

通常，如果 sharedService 的值发生变化，我们必须手动调用服务函数以获取 @Sumit Deshpande 回答的 newValue.

Normally if value lept at sharedService changed, we have to manually call service functions to get the newValue as answered by @Sumit Deshpande.

还有另一种方法可以将相同的对象实例绑定到控制器的变量，并将对象实例保存在sharedService中，但请记住，这种方法不支持字符串类型的字段(除非你也把这个字符串放在对象文件中).

There is still another way that you can bind the same object instance to controller's varaible with the object instance kept in sharedService, but keep in mind that this way don't support filed of string type(unless you put the string filed in object filed too).

参考以下plunker.

refer the below plunker.

这篇关于$scope 和这种技术在通过服务共享数据方面有何不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！