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

Question

我有这个简单的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>

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

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

演示

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