2015-06-25 42 views
0

我有一個相當簡單的Angular應用程序,有四個控制器和兩個服務。一個服務將數據存儲和共享它與周圍的其他控制器,這樣的事情:當在SignalR中使用Angular時,如何在對服務中的對象進行更改時通知控制器?

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到控制器和I可以撥打HubService.getSomeData ()方法並調用服務器端方法,然後調用客戶端SignalR方法並更新DataService.testData對象。

問題是控制器在下一個$ digest循環(通常是某種UI事件)之前未通知此更改。我需要立即通知控制器。我知道通常我只需調用$ scope。$ apply()手動觸發$ digest循環,但由於服務方法是直接從服務器端方法調用的,因此無法使用$ scope。

我該怎麼辦?我如何讓Angular監視服務對象是否適用於其他服務的更改,或者如何從服務方法觸發所有控制器的$摘要循環?

回答

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; 
    }); 
}); 
+0

您可以使用apply來顯式調用循環。 –

+0

所以有時候Angular會抱怨$ scope。$ apply()表示$ digest循環已經在進行中。如果(!$ scope。$$階段){$ scope。$ apply();}包含它,我解決了這個問題。我必須用$ rootScope做一些等價物嗎? – RamblerToning

相關問題