从SignalR调用更新UI

我试图在接收到来自SignalR服务器的调用时更新我的UI。从SignalR调用更新UI

在我的示例代码中，我有两个Div标签，它们又由不同的角度控制器控制。我有一个SignalR服务，我注入了一个控制器。在接收来自SignalR服务的事件时，第一个控制器广播消息，第二个控制器正在监听它。它应该更新用户界面，但它不这样做...

我在做什么错？

这里是我的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>

来源

2015-02-10 Shrewdroid

它能够连接到你的signalR服务等吗？什么是实际发生的错误 – 2015-02-10 14:29:55

是的，它连接到我的SignalR服务非常好......那就是问题......没有任何反应......当我从SignalR服务器收到一条消息时，它应该在第二个控制器上显示一个更新的变量。 .. – Shrewdroid 2015-02-10 14:32:45

在你的addMessage函数中试试这个：'$ scope。$ apply（function（）{$ rootScope。$ broadcast（'MsgFromSRServer'）;}）;'我*想*可能是问题？ – 2015-02-10 14:34:12

注：$scope只有控制器&指令中访问。

在你的情况在这里，signalRs回调事件没有注册在angularJS $digest循环内（它不知道有什么改变，或者它需要寻找改变）。您需要手动调用它（使用$rootScope.apply()）。

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

来源

2015-02-10 15:03:30

从SignalR调用更新UI

回答

相关问题