Данные Websockets / AngularJS, полученные из сокета без привязки к переменной $ scope

Question

Я пытаюсь получить данные из веб-сокета с помощью функции ниже

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)
}]);

Я присваиваю event.data для $scope.data внутри функции RX, и я могу проверить с помощью console.log(event.data) что данные были получены правильно, однако, если я проверяю значение console.log($scope.data), оно становится неопределенным.

Похоже, что все, что я получаю в функции RX, остается локальным ... и я не могу отобразитьэто на моей странице, используя {{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 () для входа в AngularJS.контекст выполнения из JavaScript.Имейте в виду, что в большинстве мест (контроллеры, сервисы) $apply уже был вызван для вас директивой, которая обрабатывает событие.Явный вызов $apply необходим только при реализации пользовательских обратных вызовов событий или при работе со сторонними обратными вызовами библиотек.

Для получения дополнительной информации см. AngularJS Developer Guide - Интеграция с циклом событий браузера.