为什么我的Angular服务值没有更新我的作用域？

Question

我有一个this simple jsfiddle，它展示了我认为可以被注入到任何控制器中并进行监控的动态服务值。以下是Angular代码:

var app = angular.module("application", []);

app.service("valueSetter", function(){
    that = this;
    this.serviceValue = {count: 1};
    this.updatevalue = function(){
        that.serviceValue.count = that.serviceValue.count + 1;
        console.log(that.serviceValue);
    };
});

app.controller("appcontroller", function($scope, valueSetter){
    $scope.scopeValue = valueSetter.serviceValue.count; 
    $scope.update = function(){
        valueSetter.updatevalue();
    };
});

而且HTML很简单：

<div ng-app="application" ng-controller="appcontroller">    
    Scope value is: {{scopeValue}}<br /><br />
    <input type="button" value="update" ng-click="update()" />
</div>

如果您观察控制台，您会看到服务值增加了，但增加的值没有反映在控制器作用域中。我是否误解了它应该如何工作？

- sonicblis

Answer 1

你不能像那样绑定服务变量，但是你可以绑定服务函数。在你的服务中添加一个getter：

this.getValue = function(){
    return that.serviceValue;
}

在控制器中将scopeValue分配给getter:

$scope.scopeValue = valueSetter.getValue; 

像这样绑定：

Scope value is: {{scopeValue()}}

编辑

您还可以将valueSetter服务分配给控制器中的$scope变量：

$scope.valueSetter = valueSetter;

并像这样绑定：

Service value is: {{valueSetter.serviceValue}}

演示

编辑 2

您还可以将服务中的 this.serviceValue 更改为对象，如下所示:

this.serviceValue = {value: 1};
this.updatevalue = function(){
    that.serviceValue.value = that.serviceValue.value + 1;
    console.log(that.serviceValue.value);
};

在您的控制器中，可以通过以下方式分配scopeValue:

$scope.scopeValue = valueSetter.serviceValue; 

然后像这样绑定:

Scope value is: {{scopeValue.value}}

演示

重点是，如果服务中的属性是基本类型（即字符串、数字或布尔值），当您将其分配给作用域变量时，您只是复制了该值，并且它与服务没有任何链接。如果服务属性是一个对象，则当您将其分配给作用域变量时，您复制了对服务属性的引用，这为您提供了所需的绑定。

- Jerrad