Question

我有两项服务。一个取决于另一个。我还有一个控制器，它依赖于其中一个服务中的服务和更新值。其他服务没有看到更新。

下面我有一个更新一项服务的控制器，但更新从未反映在其他服务中。我希望serviceOne＆＃39; calculatedVal能够反映serviceTwo changingVal中的更改。任何建议表示赞赏。最后小提琴。

HTML

<div ng-app="myApp">
  <div ng-controller="con">
    <h1 ng-click="showOnConsole()">
    click
    </h1>    
    {{serviceOneStr}}
    <br/>
    {{serviceTwoStr}}
  </div>
</div>

JS

var myApp = angular.module('myApp', []);

myApp.service('serviceOne', function(serviceTwo) {
    this.calculatedVal = "some string" + " " + serviceTwo.changingVal;
});

myApp.service('serviceTwo', function() {
    this.changingVal = "version 1";
});

//Controller
myApp.controller("con",function($scope, $timeout, serviceOne, serviceTwo){
    var counter = 0;
  $scope.serviceOneStr = "Initialized One";
  $scope.serviceTwoStr = "Initialized Two";

  $scope.showOnConsole = function(){
    counter = counter + 1;
    serviceTwo.changingVal = "version " + counter;
    $scope.serviceOneStr = JSON.stringify(serviceOne);
    $scope.serviceTwoStr = JSON.stringify(serviceTwo);
    console.log(serviceOne);
    console.log(serviceTwo);
  }
})

Fiddle

Answer 1

我总是通过使用带有getter / setter的工厂来更容易地解决这些问题。以下是实现此方法的一种方法 - 将.service模块更改为.factory，如下所示：

myApp.factory('serviceOne', function(serviceTwo) {
    var service = {
        get calculatedVal() {
            return "some string " + serviceTwo.changingVal;
        }
    }
    return service;
});

myApp.factory('serviceTwo', function() {
    var changingVal = "version 1";
    var service = {
        get changingVal() {
            return changingVal;
        },
        set changingVal(value) {
            changingVal = value;
        }
    }
    return service;
});

Answer 2

简短回答：将calculatedVal更改为某个功能，以使其始终具有最新值changingVal。

myApp.service('serviceOne', function(serviceTwo) {
    this.calculatedVal = function() {
       return "some string" + " " + serviceTwo.changingVal;
    };
});

我想解释一下你为什么做不起作用，所以你可以理解它的修复。

角度服务是单身人士。服务声明只运行一次并存储。因此，当您将服务上的属性设置为字符串或数字（值类型）时，除非另有设置，否则这是它的生命周期值。

对于这一行：

this.calculatedVal = "some string" + " " + serviceTwo.changingVal;

它将calculatedVal的值设置为serviceTwo.changingVal的初始值。在角度观看changeVal的值并更新calculatedVal之后，幕后没有任何魔力。这就是为什么你需要一个函数来获得计算值。

Angular JS-根据其他服务的一项服务看不到服务的更新

2 个答案: