从 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');
});

从 SignalR 调用更新 UI

Update UI from a SignalR call

signalr

angularjs