Question

在第一次迭代后，

$watch()未捕获return sseHandler.result.cpuResult.timestamp。我不确定为什么，因为我验证了日期戳正在改变。此外，在第一次迭代之后....如果我反复点击视图，范围变量和视图会更新新信息......所以它就像$watch一样有用......但是只有我点击手动查看以使其工作。

'use strict';

angular.module('monitorApp')
.controller('homeCtrl', function($scope, $location, $document) {
    console.log("s");
});

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

    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.$watch(function () {
        console.log("being caught");
        return sseHandler.result.cpuResult.timestamp},
     function(){
            console.log("sss");
            cpuUpdate(sseHandler.result);
    });
}]);


angular.module('monitorApp')
.controller('filesystemsCtrl', function($scope, $location, $document) {
    console.log("s");
});

angular.module('monitorApp')
.controller('httpPortCtrl', function($scope, $location, $document) {
    console.log("s");
});

angular.module('monitorApp')
.factory('sseHandler', function ($timeout) {
    var source = new EventSource('/subscribe');
    var sseHandler = {};
    sseHandler.result =  { "cpuResult" : { timestamp : '1'}  };
    source.addEventListener('message', function(e) {
         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;
});

Answer 1

message中的EventListener事件未启动新的摘要周期。在sseHandler尝试：

$timeout(function () {sseHandler.result = result;});

Answer 2

sseHandler.result.cpuResult.timestamp中的更改发生在Angular上下文中（在异步执行的事件侦听器回调中），因此Angular不知道更改。

您需要通过调用$rootScope.$apply()：

手动触发$ digest循环

.factory('sseHandler', function ($rootScope, $timeout) {
    ...
    source.addEventListener('message', function (e) {
        $rootScope.$apply(function () {
            // Put all code in here, so Angular can also handle exceptions
            // as if they happened inside the Angular context.
            ...
        });
    }
    ...

你随机点击应用程序使其工作的原因是因为你可能触发了一些其他动作（例如更改了模型，触发和ngClick事件等），这反过来触发了$ digest循环。

Angular.js $ watch（）没有捕获来自Service的JS对象成员的更新

2 个答案: