通过SignalR调用更新UI

Question

当我收到SignalR服务器的电话时，我正在尝试更新UI。

在我的示例代码中，我有两个Div标签，它们依次由不同的Angular控制器控制。 我已经将SignalR服务注入一个控制器中。 在从SignalR服务接收到事件后，第一控制器广播一条消息，第二控制器正在侦听该消息。 它应该更新UI，但不这样做。

我究竟做错了什么？

这是我的AngularJS和HTML代码：

 'use strict' var testapp = angular.module('testapp', []); testapp.factory('testService', function() { return { testvariable: 0 }; }); testapp.service('signalRService', function($rootScope, $scope, testService) { var myChatHubProxy = null; var connection = null; var initialize = function() { //my signalr server resides here connection = $.hubConnection("http://localhost:28014"); //creating a proxy myChatHubProxy = connection.createHubProxy('myChatHub'); //Publishing an event when server pushes a greeting message myChatHubProxy.on('addMessage', function(message) { console.info('Message received from signalr server.'); $rootScope.$broadcast('MsgFromSRServer'); }); connection.start() .done(function() { console.log('SignalR now connected. Connection Id: ' + connection.id); }) .fail(function() { console.log('Could not connect!'); }); }; initialize(); return { initialize: initialize }; }); testapp.controller('SimpleController', ['$rootScope', '$scope', 'testService', 'signalRService', function($rootScope, $scope, testService, signalRService) { $scope.makechanges = function() { testService.testvariable++; $rootScope.$broadcast('MsgFromButtonClick'); }; } ]); testapp.controller('SecondController', ['$rootScope', '$scope', 'testService', function($rootScope, $scope, testService) { $rootScope.$on('MsgFromButtonClick', function() { $scope.testvar = testService.testvariable; }); $rootScope.$on('MsgFromSRServer', function() { testService.testvariable++; $scope.updateuimanually(); }); $scope.updateuimanually = function() { $scope.manualvar = testService.testvariable; }; } ]); 

 <!DOCTYPE HTML> <html ng-app="testapp"> <head> <title>AngularJS - SignalR Sample.</title> </head> <body> <div ng-controller="SimpleController" style="background-color: #c1c1a1; width: 50%; float: left; height: 200px;"> <br /> <br /> <button ng-click="makechanges()">Make Change in Second Controller</button> <br /> <br /> <br /> </div> <div ng-controller="SecondController" style="background-color: #a1b1c1; width: 49%; float: right; height: 200px;"> <br /> <h3>{{ testvar }}</h3> <button ng-click="updateuimanually()">Update Manually</button> <h3>{{ manualvar }}</h3> <br /> <br /> </div> <script src="angular.js"></script> <script src="jquery-1.10.2.js"></script> <script src="jquery.signalR-2.2.0.js"></script> <script src="datacontainer2.js"></script> <!-- my angular file --> </body> </html> 

Answer 1

注意： $scope仅在控制器和指令中可访问。

在您的情况下，signalRs回调事件未在angularJS $digest循环内注册（它不知道任何更改，或者它需要查找更改）。 您需要手动调用它（使用$rootScope.apply() ）。

$rootScope.apply(function () {
    $rootScope.$broadcast('MsgFromSRServer');
});