AngularJS中WebSocket接收的数据无法绑定到$scope变量求助

我来帮你拆解下问题根源，再给出具体的解决办法：

首先你遇到的两个现象，其实对应两个不同的问题：

1. 初始化时console.log($scope.data)输出undefined #

这是时序问题：控制器初始化时就立刻执行了这个log，但此时WebSocket刚建立连接，还没收到任何消息，RX函数根本没被触发过，$scope.data自然是undefined。你可以把这个log移到RX函数内部，或者等收到消息后再在控制台手动查看$scope.data，就能拿到正确的值了。

2. RX函数内更新$scope.data后视图不显示，外部也拿不到最新值 #

这是AngularJS的核心机制问题：WebSocket的onmessage回调是运行在Angular的**消化循环（Digest Cycle）**之外的异步操作。Angular只会在自己的上下文（比如ng-click回调、$http响应、$timeout回调等）里自动监测$scope的变化并更新视图，而WebSocket的回调不在这个范围内，所以哪怕你更新了$scope.data，Angular也感知不到变化，视图自然不会更新，外部也无法立刻获取到最新值。

解决方法：手动触发Angular的消化循环 #

你可以通过两种方式让Angular感知到$scope的变化：

方法一：调用$scope.$apply()

修改你的RX函数，在更新$scope.data后手动触发消化循环：

$scope.RX = function(event) {
  $scope.data = event.data;
  console.log(event.data);
  $scope.$apply(); // 通知Angular检测$scope变化，更新视图
};

方法二：用$timeout包裹更新逻辑

$timeout是Angular提供的服务，它会自动触发消化循环，你只需要把更新代码放在$timeout回调里即可（记得先把$timeout注入到控制器中）：

app.controller('Dashboard', ['$window', '$scope', '$http', '$timeout', function ($window, $scope, $http, $timeout) {
  var url = new URL('/dashboard', window.location.href);
  url.protocol = url.protocol.replace('http', 'ws');
  var socket = new WebSocket(url.href);
  
  socket.onopen = function () {
    console.log("Status: Connected")
  };
  
  $scope.RX = function(event) {
    $timeout(function() {
      $scope.data = event.data;
      console.log(event.data);
    });
  };
  
  socket.onmessage = $scope.RX;
}]);

这样修改后，当WebSocket收到消息时，Angular就能监测到$scope.data的变化，视图里的{{data}}也能正常显示内容了。

内容的提问来源于stack exchange，提问作者TTKDroid