簡體   English   中英

角度監視對象不在范圍內

[英]angular watch object not in scope

我有一個可以從Angular外部更改值的服務:

angularApp.service('WebSocketService', function() {
    var serviceAlarms = [];
    var iteration = 0;

    this.renderMessages = function(alarms, socket) {
        if (! angular.equals(serviceAlarms, alarms)) {
            serviceAlarms = alarms;
            iteration++;
        }
    };

    this.getAlarms = function () {
        return serviceAlarms;
    };
    this.iteration = function () {
        return iteration;
    };
    this.socket = initSocketIO(this);
});

initSocketIO函數使對該服務的回調renderMessages()函數進行回調,並且serviceAlarms變量會不斷變化。

現在,我正在嘗試監視此服務的更改,如下所示:

controllers.controller('overviewController', ['$scope', 'WebSocketService', function ($scope, WebSocketService) {
    $scope.$watch(
        function () {
             return WebSocketService.iteration();
        },
        function(newValue, oldValue) {
            $scope.alarms = WebSocketService.getAlarms();
        },
        true
    );
}]);

無濟於事。 提供給$ watch的第二個函數只有在控制器初始化時才執行。

我嘗試使用true和不使用true作為第三個參數。

我最終使用了下面的解決方案,因為$ watch無法正常工作。

我將解決方案重構為結合使用$ rootScope和:

angularApp.run(['$rootScope', function($rootScope){
    $rootScope.socket = {};
    $rootScope.socket.alarms = [];
    $rootScope.socket.faults = [];
    $rootScope.socket.renderErrors = function(faults, socket) {
        var faultArray = [];
        angular.forEach(faults, function(error) {
            error.value ? faultArray.push(error) : null;
        });
        if (! angular.equals($rootScope.socket.faults, faultArray)) {
            $rootScope.socket.faults = faultArray;
            $rootScope.apply();
        }
    };

    $rootScope.socket.renderMessages = function(alarms, socket) {
        if (! angular.equals($rootScope.socket.alarms, alarms)) {
            $rootScope.socket.alarms = alarms;
            $rootScope.$apply();
        }
    };

    $rootScope.socket.socket = initSocketIO($rootScope.socket);
}]);

現在,我在所有作用域中都有我的socket-updated-model,可以在控制器和視圖中自由使用。 控制器示例:

$scope.acknowledgeAlarm = function(alarm) {
    $scope.socket.socket.emit('acknowledgeAlarm', {
        hash:alarm.icon.hash,
        id:alarm.id
    });
};

查看示例:

<div ng-repeat="alarm in socket.alarms">
    {{alarm.name}} {{alarm.icon.progress}}
</div>

您應該使用$rootScope.$watch (而不是$scope.$watch

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM