angularjs – 为什么我的角度服务值没有更新我的范围？

我有 this simple jsfiddle,它演示了我认为是一个动态服务值,可以被注入它的任何控制器监视.这是角度代码：

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>

如果您观察控制台,则可以看到服务值增量,但增量值不会反映在控制器范围中.我误解了这应该如何运作？

解决方法

您无法绑定到这样的服务变量,但您可以绑定到服务功能.在服务中添加一个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}}

Demo

编辑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}}

Demo

关键是如果服务中的属性是一个原语(本质上是一个字符串,数字或布尔值),当你将它分配给一个范围变量时,你只是制作一个值的副本,它没有回链接服务.如果服务属性是一个对象,那么当您将其分配给范围变量时,您将复制对服务属性的引用,从而为您提供所需的绑定.