角度-在服務中更改對象屬性值，然后在另一個控制器中使用它

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/