Question

当客户端第一次启动时，我试图延迟广播的第一次迭代，直到控制器中的$watchCollection准备好捕获它。但是，setTimeout()并没有解决问题，而是在没有eventlistener的地方。使用$timeout和同样的结果也尝试了这一点。这是为什么？

angular.module('monitorApp')
.factory('sseHandler', function ($rootScope) {
    var source = new EventSource('/subscribe');
    var sseHandler = {};
    setTimeout(function() {
        source.addEventListener('message', function(e) {
            $rootScope.$apply(function (){
                result = JSON.parse(e.data);
                event = Object.keys(result)[0];
                switch(event) {
                    case "cpuResult":
                        sseHandler.result = result;
                    console.log(sseHandler.result.cpuResult.timestamp);
                    break;
                }
            });
        });
        return sseHandler;
    }, 1000);
});

修改：我在我的节点服务器中拥有它，当客户端连接SSE广播时立即发送给它。服务source.addEventListener成功捕获第一个广播。但是当时控制器没有准备好，$scope.$watchCollection错过了第一次广播。

angular.module('monitorApp')
.controller('cpuCtrl',   ['$scope', 'sseHandler', function($scope, sseHandler) {
    var cpuUpdate = function (result) {
        $scope.available = result.cpuResult.avaiable;
        $scope.apiTimeStamp = result.cpuResult.timestamp;
        $scope.infoReceived = new Date();
        $scope.last15 = result.cpuResult.metrics['15m'].data
        $scope.last5 = result.cpuResult.metrics['5m'].data
        $scope.lastMinute = result.cpuResult.metrics['1m'].data
    }
    $scope.$watchCollection(function(){
                 return sseHandler.result; 
    }, function(){
        if (sseHandler.result.cpuResult) {
            console.log("yes");
                 cpuUpdate(sseHandler.result);
        }
    });
}]);

Answer 1

如果您希望（无论出于何种原因）控制器被实例化并准备好在sseHandler连接到服务器时执行操作，那么最可靠的方法是拥有init()或{{1} connect()上的方法，让控制器在准备就绪时调用它。

E.g：

sseHandler

Answer 2

这样怎么样？工厂将正常返回对象。并且在$ timeout之后将设置监听器并且返回的对象通常应该填充数据。

angular.module('monitorApp')
.factory('sseHandler', function ($rootScope, $timeout) {
    var source = new EventSource('/subscribe');
    var sseHandler = {};
    $timeout(function() {
        source.addEventListener('message', function(e) {
            $rootScope.$apply(function (){
                result = JSON.parse(e.data);
                event = Object.keys(result)[0];
                switch(event) {
                    case "cpuResult":
                        sseHandler.result = result;
                    console.log(sseHandler.result.cpuResult.timestamp);
                    break;
                }
            });
        });
    }, 1000);
    return sseHandler;
});

工厂/服务中的Angular.js- setTimeout延迟事件监听器

2 个答案: