Почему Angular.js не обновляет View при эвенте Socket.io?

Question

[HoHsi]

Доброго дня!
Почему ангуляр не обновляет DOM при эвенте Socket.io? Хотя если вывести console.log data, то дата не undefined.

CoffeeScript:

do (window, angular, io)->
    adminApp = angular.module('adminApp', [])
    socket = io.connect '/', {
        path: '/admin/socket.io'
    }

    adminApp.controller 'ProgressCtrl', [
        '$scope'
        ($scope) ->
            $scope.stats = {
                cpu:
                    percent: 10
                memory:
                    percent: 70
            }

            socket.on 'server:stats', (data) ->
                $scope.stats.percent = data.os.percent * 100
    ]

Comments

[Alex]

$scope.apply

[HoHsi]

streetflush: можно пример?

Answer 1

[Андрей Щетинин]

Потому что сокет работает асинхронно, и angular не знает об изменении переменной. Для того чтобы angular проверил эту переменную, тебе нужно заставить его это сделать, для этого ты можешь либо вызвать функцию $scope.$apply() или $scope.$digest() или обернуть код который изменяет данные в конструкцию

$timeout(function(){
// тут код
})

Но с использованием функций $scope.$apply() и $scope.$digest() есть одна проблема, если digest уже запущен, angular падает, поэтому я советую тебе использовать $timeout

Answer 2

[Radiks Alijevs]

Доброго дня!

Вам нужно поставить scope.$watch() на изменения свойства в scope. Посмотрите в докуметации пример https://docs.angularjs.org/api/ng/type/$rootScope.Scope, раздел $watch

Comments

[HoHsi]

Можно пример, а то не совсем из доки понял как прикрутить Socket?

[Radiks Alijevs]

$scope.$watch("counter", function (newValue, oldValue) {
console.log("Старое значение - " + oldValue + ", новое значение - " + newValue);
});
$interval(function () {
$scope.counter++;
}, 1000);

[Radiks Alijevs]

$scope.$watch("counter", function (newValue, oldValue) {
console.log("Старое значение - " + oldValue + ", новое значение - " + newValue);
});
$scope.$apply(function () {
$scope.counter++;
});

[HoHsi]

Радик Алиев: а это клиенту память и CPU не выжрет? Так как watch основан на setInterval, как я понимаю

[Radiks Alijevs]

$interval не нужно использовать (это лоя примера) только $watch, а обновляться свойство должно через сокеты. $watch объект, который обновляет свойство текущего свойства. Подробнее о wachera'х по гугли dirty check angular