Javascript 角度监视对象不在范围内
我有一个服务,其中的值可以从外部角度更改:Javascript 角度监视对象不在范围内,javascript,angularjs,Javascript,Angularjs,我有一个服务,其中的值可以从外部角度更改: angularApp.service('WebSocketService', function() { var serviceAlarms = []; var iteration = 0; this.renderMessages = function(alarms, socket) { if (! angular.equals(serviceAlarms, alarms)) { serv
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函数回调此services renderMessages函数,serviceallarms变量会稳定地更改
现在,我正努力观察这项服务的变化,如下所示:
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);
}]);
现在,我在所有范围内更新了套接字模型,可以在控制器和视图中自由使用。
控制器示例:
$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将console.logWebSocketService.iteration放在被监视的函数中,以查看迭代值是否增加。还请记住,您需要触发摘要循环才能启动手表。@Wawy,在a上面的代码中,我已删除了所有控制台打印输出。迭代不断地从0、1、2……更新。。。您可以提供触发摘要循环的示例吗?我希望您使用console.log检查的是,是否执行了实际的$watch函数。要触发$digest循环,您需要调用$scope.$apply.Added$scope.$scope.alarms=WebSocketService.getAlarms之后的$apply;获取:错误:[$rootScope:inprog]$digest已在进行中。watch函数的打印输出为:[函数1内的$watch,函数2内的$watch,函数1内的$watch,函数1内的$watch,WebSocketIO连接,1,2,3,4…]1,2,3,4来自哪里?是函数{return WebSocketService.iteration;}中的console.logWebSocketService.iteration。您应该在增加迭代次数后调用$apply。