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

问题描述

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

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

他们共享此服务：

  var app = angular.module（'myApp'，[]）; 
 $ b app.service（'sharedProperties'，function（）{
 var stringValue ='测试字符串值'; 
 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

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

区别在于$ scope似乎绑定在控制器2中的两个绑定的div上，但是这个例子并没有这样做。此示例在试图同时更改两个值（stringValue和objectValue）时不会更改任何值。它打印在控制台中未定义。

尽管它们共享服务，但两种技术都不会导致controller2中的输入更改controller1中的div。

我想知道如何通过控制器两种方式进行这些绑定，以及this示例发生什么和$ scope示例。

解决方案

基本上 $ scope 和这个与您在问题中陈述的内容相同。

当您检索 ControllerAs （ myController2 as cont2 ），您希望从模板访问控制器的所有内容（变量和函数）必须具有 cont2 。

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

---

UPD：

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

还有一种方法可以将同一对象实例绑定到控制器的变量上，同时将对象实例保存在sharedService中，但请记住这种方式不支持字符串类型的字段（除非您将字符串字段填入对象字段中）。

请参阅下面的 plunker 。

If you're going to create new code, please don't change the original jsbins

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.

They both share this service:

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

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

Here's the "this" example: http://jsbin.com/conidesuni/edit?html,js,output

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

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.

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.

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

I want to know how I can make these binds two ways across the controllers and what exactly is the difference between what is happening with the "this" example and $scope example.

解决方案

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

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.

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:

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

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

refer the below plunker.

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