从套接字接收的Websockets / AngularJS数据未绑定到$ scope变量

Question

我试图使用下面的函数从websocket获取数据

app.controller('Dashboard', ['$window', '$scope', '$http', function ($window, $scope, $http) {
    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) {
        $scope.data = event.data 
        console.log(event.data)
    };
    socket.onmessage = $scope.RX;
    console.log($scope.data)
}]);

我在$scope.data函数中将event.data分配给RX，我可以通过console.log(event.data)检查数据是否已正确接收，但是，如果我检查{的值{1}}未定义。

似乎我在RX功能中获得的任何东西都保持在本地......我无法使用console.log($scope.data)在我的页面上显示它。

Answer 1

使用$scope.$apply：

app.controller('Dashboard', ['$window', '$scope', '$http', function ($window, $scope, $http) {
    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) {
        $scope.data = event.data
        $scope.$apply(); 
        console.log(event.data)
    };
    socket.onmessage = $scope.RX;
    console.log($scope.data)
}]);

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流程。这将JavaScript拆分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

您还可以使用$apply()从JavaScript输入AngularJS执行上下文。请记住，在大多数地方（控制器，服务）$apply已由处理事件的指令调用。只有在实现自定义事件回调或使用第三方库回调时才需要显式调用$apply。

有关详细信息，请参阅AngularJS Developer Guide - Integration with the browser event loop。