当代码在SignalR回调内时,AngularJS绑定延迟

AngularJS bindings delayed when code is inside SignalR callback

本文关键字:AngularJS 绑定 延迟 代码 SignalR 回调      更新时间:2023-09-26

我有一些更新AngularJS$范围属性的代码。如果此代码在函数中运行,则会立即更新网页。然而,当在SignalR回调函数中运行时,相同的代码不会立即更新网页。

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

带角度绑定的HTML:

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

角度控制器内的功能:

  $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;
      }
  }

这实际上是有效的,只是网页直到下次点击页面上的按钮时才会更新绑定。它与以前的代码相同,但现在它只是在回调中。为什么我的页面不立即更新?

Angular不会自动注意到在"外部"回调期间发生的范围更改。

在这种情况下,你需要告诉angular范围已经改变了,你可以通过将代码包装在$scope.apply块中来做到这一点:

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