javascript - 将 Angular 与 SignalR 结合使用时，当服务中的对象发生更改时，如何通知 Controller ？

Question

我有一个相当简单的 Angular 应用程序，带有四个 Controller 和两个服务。一项服务存储数据并与其他 Controller 共享数据，如下所示:

var DataService = function($http) {
    this.testData = [];
}    
MyApp.service('DataService', ["$http", DataService]);

另一个服务包含客户端 SignalR 方法，如下所示:

var HubService = function(DataService) {    
    this.testHub = $.connection.TestHub;
    this.connectionStatus = [];

    this.connectToHub = function(callback) {
        var self = this;
        $.connection.hub.start().done(function() {
            self.connectionStatus.push(1);
            if (callback) {
                callback();
            }
        });
    };  

    this.getSomeData = function (node, callback) {        
        this.testHub.server.getSomeData(node).done(function (response) {            
            if (callback) { callback(); }         
        });
    };  

    this.testHub.client.addData = function(serverData) {
        DataService.testData.push(serverData)   
    };  
}

MyApp.service('HubService', ["DataService", HubService]);

其中服务器端集线器方法类似于

public class TestHub : Hub {
     public void GetSomeData(Node node) {
        var data = _queries.getSomeDataFromAServer();
        Clients.All.addData(data);
     }
}

现在一切正常，我将 DataService 和 HubService 注入(inject)到 Controller 中，我可以调用 HubService.getSomeData() 方法，该方法调用服务器端方法，然后调用客户端 SignalR 方法， DataService.testData 对象已更新。

问题是，直到下一个 $digest 周期(通常是某种 UI 事件)之前， Controller 才会收到此更改的通知。我需要立即通知管制员。我知道通常我可以调用 $scope.$apply() 来手动触发 $digest 周期，但是由于服务方法是直接从服务器端方法调用的，因此无法使用 $scope。

我该怎么办？如何让 Angular 监视服务对象以了解另一个服务的更改，或者如何从服务方法触发所有 Controller 的 $digest 周期？

Answer 1

这可能不是答案，但你会得到如何实现它的机制。

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

app.service('myService', function($rootScope) {
  var data = 0;
  var id = 0;

  var increment = function() {
    data = data + 1;
    $rootScope.$apply();
    console.log("Incrementing data", data);
  };

  this.start = function() {
    id = setInterval(increment, 500) ;

  };

  this.stop = function() {
    clearInterval(id);
  };

  this.getData = function() { return data; };

}).controller('MainCtrl', function($scope, myService) {
  $scope.service = myService;
  $scope.controllerData = 0;

  $scope.start = function() {
    myService.start();
  };

  $scope.stop = function() {
    myService.stop();
  };

  $scope.$watch('service.getData()', function(newVal) {

    console.log("New Data", newVal);
    $scope.controllerData = newVal;
  });
});