Angular.js Service Factory module..以函数形式返回内部代码

Angular.js Service Factory module...return inner code as a function?

本文关键字：返回 内部 代码 函数 js Service Factory module Angular      更新时间：2023-09-26

我对angular.js真的很陌生。这是我写的第一个服务。它接受一个json对象并更新控制器的作用域。不过我有点困惑……我想我应该包装ssellistener的内部代码，并返回它作为一个函数，但我不确定我将如何写，为什么我需要返回它作为一个函数。

另外，如果我将此服务注入多个控制器，会增加事件侦听器吗?我只想要一个事件侦听器。

one@demo ~/cloudimageshare-monitoring/project/app/scripts $ cat services/sse_listen.js 
angular.module('monitorApp')
.factory('sseListener', function () {
    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":
                 cpuUpdate(result);
             break;
         }
    });
}

one@demo ~/cloudimageshare-monitoring/project/app/scripts $ cat controllers/main.js 
'use strict';
angular.module('monitorApp')
.controller('homeCtrl', function($scope, $location, $document) {
    console.log("s");
});
angular.module('monitorApp')
.controller('cpuCtrl', function($scope) {
    $scope.apiTimeStamp = "";
    $scope.infoReceived = "";
    $scope.last15 = "";
    $scope.last5 = "";
    $scope.lastMinute = "";
    var cpuUpdate = function (result) {
        $scope.$apply(function () {
            $scope.apiTimeStamp = result.cpuResult.timestamp;
            $scope.infoReceived = new Date();
            $scope.last15 = result.cpuResult.metrics['1m'].data
            $scope.last5 = result.cpuResult.metrics['5m'].data
            $scope.lastMinute = result.cpuResult.metrics['15'].data
        });
    }
});

而不是直接调用cpuUpdate(我不清楚您的工厂如何获得对该函数的引用)，最好使用$rootScope。$broadcast(eventName, data)，并对控制器中的事件作出反应。此外，你应该从工厂返回一个对象，但因为你不需要在任何地方注入它，所以最好把它放在app.run中。以下是我认为你的代码应该如何与我提到的变化:

angular.module('monitorApp').
    run(function ($rootScope) { //Inject the $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":
                     // Broadcast the event with data
                     $rootScope.$broadcast('$cpuResult', result);
                 break;
             }
        });
    }).
    controller('cpuCtrl', function($scope)){
        $scope.apiTimeStamp = "";
        $scope.infoReceived = "";
        $scope.last15 = "";
        $scope.last5 = "";
        $scope.lastMinute = "";
        // Need to pass the event to cpuUpdate,
        var cpuUpdate = function (e, result) { 
            $scope.$apply(function(){
                $scope.apiTimeStamp = result.cpuResult.timestamp;
                $scope.infoReceived = new Date();
                $scope.last15 = result.cpuResult.metrics['1m'].data
                $scope.last5 = result.cpuResult.metrics['5m'].data
                $scope.lastMinute = result.cpuResult.metrics['15'].data
            });
        };
        //Listen for the event, call cpuUpdate when caught
        $scope.$on('$cpuResult', cpuUpdate);
    });
相关文章：