Angular.js $ scope.on（）在頁面加載時未捕獲到第一個廣播

Question

由於某種原因...當頁面首次加載$scope.$on('$cpuResult', cpuUpdate); 沒有收看第一廣播。 我使用console.log("broadcast");驗證了第一個廣播已成功結束console.log("broadcast"); 。 第一個廣播對於初始化數據很重要，例如$scope.$on('$cpuResult', cpuUpdate); 沒有收看第一廣播，我該如何解決？

angular.module('monitorApp')
.controller('cpuCtrl', function($scope) {
    $scope.avaiable = "";
    $scope.apiTimeStamp = "";
    $scope.infoReceived = "";
    $scope.last15 = "";
    $scope.last5 = "";
    $scope.lastMinute = "";

    var cpuUpdate = function (e, result) {
        console.log("yay");
        $scope.$apply(function () {
            $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.$on('$cpuResult', cpuUpdate);
});

---

angular.module('monitorApp')
.run(function ($rootScope) {
    var source = new EventSource('/subscribe');

    source.addEventListener('message', function(e) {
        var result = JSON.parse(e.data);
         event = Object.keys(result)[0];
         switch(event) {
             case "cpuResult":
                 console.log("broadcast");
                 $rootScope.$broadcast('$cpuResult', result);
             break;
         }
    });
});

---

<script src="scripts/angularApp.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/sse_listen.js"></script>

Answer 1

在您的第一個事件被推出時，尚未創建控制器。 您可以將應用重構到可以公開結果數據的工廠中，然后從控制器中觀察數據：

angular.module('monitorApp').
factory('sseHandler', function ($timeout) {
    var sseHandler = {};
    sseHandler.result = {};
    var source = new EventSource('/subscribe');
    source.addEventListener('message', function(e) {
        var result = JSON.parse(e.data);
         event = Object.keys(result)[0];
         switch(event) {
             case "cpuResult":
                 console.log('sseHandler result change');
                 //The controller will watch the result
                 //on this object
                 $timeout(function(){
                     sseHandler.result = result;
                 });
                 //I wrap the result change in a timeout
                 //to schedule an apply,
                 //which will trigger your watches to run
                 //their dirty checks.
             break;
         }
    });
    return sseHandler; //return the object with exposed result
}).
controller('cpuCtrl', function($scope, sseHandler) {
    $scope.avaiable = "";
    $scope.apiTimeStamp = "";
    $scope.infoReceived = "";
    $scope.last15 = "";
    $scope.last5 = "";
    $scope.lastMinute = "";

    var cpuUpdate = function (result) {
        console.log("yay");
        // You don't need the apply here anymore.
        $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;
    }
    // The second argument of the watch gets called when
    // the result of the first argument changes
    // I'm assuming timestamp changes often enough
    $scope.$watch(function(){ 
        return sseHandler.result.timestamp; 
    }, function(){
        cpuUpdate(sseHandler.result);
    });

});