AngularJS：$ watch - 加快速度

Question

我一直在开发一个webapp，我必须在websocket上接收消息并进行更改。

基本上，我有类似的东西：

var socketService = angular.module('socketService');

socketService.factory('Listen', function () {
    // connect etc.
    socket.onmessage = function (msg) {
        lastMsg = msg;
        console.log(msg); // this is instant
    }

    return {
        lastMsg: function () {
            return lastMsg;
        }
    }
});

我在控制器内部有另一个模块，我正在使用这个服务

var mainMod = angular.module('mainMod', ['socketService']);
// some more stuff
mainMod.controller('MainCtrl', function(Listen) {
    $scope.$watch(Listen.lastMsg, function (newmsg, oldmsg) { // this is laggy
        // do stuff here
    });
});

问题是：我的$watch在套接字上收到消息后不会触发 。 如果我在console.log中提供服务中的所有套接字消息，则会立即显示日志，但是$ watch需要自己的甜蜜时间来触发。 而且，这是非常不规则的 - 我没有看到滞后的模式。

我认为这与Angular的嘀嗒声有关 - 而且$ watch会在每个刻度上进行比较，但这会严重影响我的应用程序的性能。

一种可能的解决方法是使用$broadcast ，但我不希望这种方法。

我该怎么办？

Answer 1

你的lastMsg是一个原语，而且你正在监听lastMsg的$scope ，但是你没有触发$scope.$digest （通常通过$scope.$apply ，但更安全， $timeout ）循环时它会发生变化。 为了让你的$watch触发，你需要：

var socketService = angular.module('socketService');

socketService.factory('Listen', function ($timeout) {
    var lastMsg;
    // connect etc.

    socket.onmessage = function (msg) {
        $timeout(function(){ // acts as a $rootScope.$apply
          lastMsg = msg;
          console.log(msg);
        });
    }

    return {
        lastMsg: function () {
            return lastMsg;
        }
    }
});

更好的方法是$rootScope.$emit事件，这样你就可以在发出事件时立即收到事件：

var socketService = angular.module('socketService');

socketService.factory('Listen', function ($rootScope) {
    // connect etc.

    socket.onmessage = function (msg) {
        $rootScope.$emit('socket', msg); 
    }

    return {
    };
});


var mainMod = angular.module('mainMod', ['socketService']);
// some more stuff
mainMod.controller('MainCtrl', function(Listen) {
    // when you inject Listen, your service singleton will be initialized
    $scope.$on('socket', function(event, msg) {
        // do stuff here
    });
});