当代码在 SignalR 回调中时，AngularJS 绑定延迟答案

【问题标题】：AngularJS bindings delayed when code is inside SignalR callback当代码在 SignalR 回调中时，AngularJS 绑定延迟
【发布时间】：2014-05-25 17:59:45
【问题描述】：

我有一些更新 AngularJS $scope 属性的代码。如果此代码在函数中运行，则网页会立即更新。但是，相同的代码在 SignalR 回调函数中运行时，不会立即更新网页。

导致绑定立即更新的代码：

带有 Angular 绑定的 HTML：

<input id="name" type="text" ng-model="playerName" /><button ng-click="RegisterPlayer();">Register</button>

Angular 控制器中的功能：

  $scope.RegisterPlayer = function () {

      $scope.numberOfPlayers += 1;
      var player = {
          name: $scope.playerName,
          randomNumber: 0,
          totalScore: 0
      }
      $scope.players.push(player);
  }

运行时，网页上的玩家数量会立即更新。

这是我如何重构代码以将信息发送到 SignalR 集线器，然后在 SignalR 回调中使用相同的代码：

这里的功能与上面相同，但现在它只是将信息发送到 SignalR 集线器：

  $scope.RegisterPlayer = function () {

      hub.server.send($scope.playerName, -1);
  }

这是回调中的代码（它确实被命中，所以接线正确完成）：

  function receiveSignalRMessage(name, message) {
      var randomNumber = parseInt(message, 10);

      // -1 means the player was registered
      if (randomNumber == -1) {
          $scope.numberOfPlayers += 1;
          var player = {
              name: $scope.playerName,
              randomNumber: 0,
              totalScore: 0
          }
          $scope.players.push(player);
          return;
      }
  }

这确实有效，只是网页不会更新绑定，直到下次单击页面上的按钮。它和以前的代码一样，但现在它只是在回调内部。为什么我的页面不会立即更新？

【问题讨论】：

我认为您可能需要将代码包装在 $scope.apply 块中：jimhoskins.com/2012/12/17/angularjs-and-apply.html
做到了！那篇文章是一个很好的解释。如果您想发表评论作为答案，我会接受。谢谢！

标签： javascript angularjs signalr

【解决方案1】：

如果发生在“外部”回调期间，Angular 不会自动注意到范围的变化。

在这种情况下，您需要告诉 Angular 范围已更改，您可以通过将代码包装在 $scope.apply 块中来做到这一点：

这里有一个很好的解释：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

【讨论】：