AngularJS: $watch – speeding things up

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是一个原语，并且您正在收听$scope的lastMsg，但您不会触发$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
    });
});