Question

我有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>

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

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

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

关键在于，如果服务中的属性是基元（本质上是字符串，数字或布尔值），当您将其分配给范围变量时，您只需复制该值，并且它没有回到服务的链接。如果服务属性是一个对象，那么当您将其分配给范围变量时，您将引用复制到服务属性，这将为您提供所需的绑定。

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

1 个答案:

修改

编辑2