角度-在服务中更改对象属性值，然后在另一个控制器中使用它

Question

我正在使用服务在两个控制器之间传递变量。 但是我在努力改变对象属性的值。 我想在第一个控制器中更改此值，并在第二个控制器中使用该新值。 您可以在下面找到我的试用版。

JSfiddle可以在这里找到

HTML代码

<div ng-app="myApp">
    <div ng-controller="myController">
        <h3>{{objectValue.data}}</h3>
        <button ng-click="changeObject()">Change the objectValue</button>
    </div>

    <div ng-controller="myController2">
        <h2>{{ newValue.data}}</h2>
    </div>
</div>

JS代码

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

app.service('sharedProperties', function() {
    var objectValue = {
        data: 'default service value'
    };

    return {
        getObject: function() {
            return objectValue;
        }
    }
});


app.controller('myController', function($scope, sharedProperties) {
    $scope.objectValue = sharedProperties.getObject();

    var changeObject = function() {
      sharedProperties.objectValue.data = "New value";
    }
});

app.controller('myController2', function($scope, sharedProperties) {
    $scope.newValue = sharedProperties.getObject();
});

Answer 1

在演示的第一个控制器中，您仅将对象的一个​​属性分配给范围变量...使其成为基元。 基元没有继承，而是按值分配

如果您在每个范围模型中维护对同一对象的引用，并且仅在视图中显示该对象的属性，则通过对象继承来维护绑定。

演示服务中用于stringvalue的原语将永远不会有任何继承，因为它不是对象

运用

app.controller('myController1', function($scope, $timeout, sharedProperties) {

    $scope.objectValue = sharedProperties.getObject();    
});

并查看

{{objectValue.data}}

由于对象上内置有角度的手表，因此将为您提供实时更新

DEMO

Answer 2

这是因为字符串是通过值而不是引用传递的，所以更改将不会传播。 更改

<li>{{objectValue}}</li>到<li>{{objectValue.data}}</li>

和

sharedProperties.getObject().data到sharedProperties.getObject() 。

并且您将看到对象正确绑定。

如果您还希望共享字符串，请考虑通过以下方法通过getter函数从控制器访问它们：

$scope.stringValue = sharedProperties.getString(); 到$scope.getString = sharedProperties.getString;

和

<li>{{stringValue}}</li>到<li>{{getString()}}</li>

看到这里： http : //jsfiddle.net/kbu1ts51/5/