Question

我有一个服务，其中值可以从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作为第三个参数。

Answer 1

我最终使用了以下解决方案，因为$ 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);
}]);

现在我在所有范围内都有我的套接字更新模型，可以在控制器和视图中自由使用。控制器示例：

$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>

Answer 2

您应该使用$rootScope.$watch（不是$scope.$watch）

角度观察对象不在范围内

2 个答案: