javascript - AngularJS:如何从 Controller 中的模型数据正确设置服务属性？

我已经设置了一项服务，以便在多个控制器之间共享一些数据/状态。在一个控制器中，我通过保存功能用范围数据更新了一些服务属性。然后，通过将范围值分配给服务，在其他控制器中使用该数据。问题是，取决于第一个控制器分配给服务的数据类型，它们是不同的行为。如果模型数据是原始值，则仅在运行保存功能时更新服务的属性。但是，如果模型数据是对象，则随着模型数据的更改，它将继续更新服务。我正在寻求实现“保存”功能，所以这不是我想要的。

因此，我试图了解不同的行为：原始对象与对象以及为什么对象立即更新，以及用对象实现保存功能的正确方法是什么。我知道您可以使用事件，并且可以在$ rootScope上使用$ broadcast和event并在第二个控制器上使用该事件来将service属性分配给作用域var，但是我喜欢将服务分配给范围中的作用域的简单性第二个控制器，如果可能，希望使用该方法。

这是一个简化的示例。

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

myApp.service('myService', function () {
    this.text = '';
    this.objText = {};

    this.setText = function (text) {
        this.text = text;
    };

    this.setObjText = function (obj) {
        this.objText = obj;
    };
});

myApp.controller('InputCtrl', ['$scope', 'myService', function ($scope, myService) {
    $scope.textObj = {};
    $scope.saveText = function (text) {
        myService.setText(text);
    }
    $scope.saveObj = function (obj) {
        myService.setObjText(obj);
    }
}]);

myApp.controller('OutputCtrl', ['$scope', 'myService', function ($scope, myService) {
    $scope.myService = myService;
}]);

并在视图（局部）中：

<div ng-controller="OutputCtrl">
    <strong>Text:</strong> {{ myService.text }}<br>
    <strong>Obj Text:</strong> {{ myService.objText }
</div>

在此处完成小提琴：http://jsfiddle.net/anpsince83/uRH93/2/

最佳答案

这与Angular无关。这是与旧的JavaScript相关的普通信息。

在您的小提琴的HTML中，您有（数字在下面供参考）：

(1)<input type="text" ng-model="text1">
(2)<button ng-click="saveText(text1)">Save Text</button>
   ...
(3)<input type="text" ng-model="textObj.text1">
(4)<input type="text" ng-model="textObj.text2">
(5)<button ng-click="saveObj(textObj)">Save Object Text</button>

“字符串”大小写（原始）：

第（1）行在InputCtrl的作用域（以下称为inScope）中创建一个名为text1的字符串变量，并将其绑定到输入字段的值。每当输入字段的值更改时，inScope.text1的值也会更改。
单击按钮（第（2）行）时，myService的text变量将设置为inScope.text1的值。因为“字符串”是原始元素，所以它通过值传递，这意味着myService.text和inScope.text1不会引用同一对象-在调用saveText()方法之后，它们只是“碰巧”具有相同的值。 inScope.text1更改后（例如，用户在输入字段中输入内容），myService.text对此一无所知。这种情况相当于：

var a = 'value1';
var b = a;
// Now: a === 'value1', b === 'value1'

a = 'value2';
// Now: a === 'value2', b === 'value1'

“对象”案例（对象）：

第（3）和（4）行在inScope的text1变量引用的（最初为空）对象中创建两个属性（text2，textObj）。每当每个输入字段的值更改时，inScope.textObj引用的对象的相应属性的值也会更改。
单击按钮（第（5）行）时，myService的object变量设置为引用与inScope.textObj相同的对象。您注意到我使用术语引用而不是值。由于“对象”不是原始类型，因此它通过引用传递，这意味着myService.object和inScope.textObj引用同一对象（在调用saveObj()方法之后。更改以行定义的输入字段的值（ 2）和（3）影响inScope.textObj引用的对象的属性（也由myService.object引用），在这种情况下，它等效于：

var a = { key: 'value1' };   // Creates new object, say {obj1}
var b = a;                   // Now b references {obj1} as well
// Now: a.key === 'value1', b.key === 'value1'

a.key = 'value2';   // Changes {obj1}'s key's value
                    // but {obj1} is also referenced by b, so...
// Now: a.key === 'value2', b.key === 'value2'

// This does not happen in your code, so you never lose reference to
// the same object from both `myService.object` and `inScope.textObj`
a = { key: 'value3' };   // Creates new object, say {obj2}
                         // but b still references {obj1}, not {obj2}, so...
// Now: a.key === 'value3', b.key = 'value2'

More info关于JS原语和对象