[英]angular watch object not in scope
I have a service in which values can change from outside Angular: 我有一个可以从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);
});
The initSocketIO function makes callbacks to this services renderMessages() function and serviceAlarms variable gets changed on a steady basis. initSocketIO函数使对该服务的回调renderMessages()函数进行回调,并且serviceAlarms变量会不断变化。
Now i am trying to watch for changes in this service like so: 现在,我正在尝试监视此服务的更改,如下所示:
controllers.controller('overviewController', ['$scope', 'WebSocketService', function ($scope, WebSocketService) {
$scope.$watch(
function () {
return WebSocketService.iteration();
},
function(newValue, oldValue) {
$scope.alarms = WebSocketService.getAlarms();
},
true
);
}]);
to no avail. 无济于事。 The second function provided to $watch never gets executed except on controller initialization.
提供给$ watch的第二个函数只有在控制器初始化时才执行。
I have tried with and without true as third parameter. 我尝试使用true和不使用true作为第三个参数。
I ended up using the solution below since $watch didn't work as excpected. 我最终使用了下面的解决方案,因为$ watch无法正常工作。
I refactored the solution to use $rootScope in combination with: 我将解决方案重构为结合使用$ 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);
}]);
Now i have my socket-updated-model in all scopes to use freely in controllers and views. 现在,我在所有作用域中都有我的socket-updated-model,可以在控制器和视图中自由使用。 Controller example:
控制器示例:
$scope.acknowledgeAlarm = function(alarm) {
$scope.socket.socket.emit('acknowledgeAlarm', {
hash:alarm.icon.hash,
id:alarm.id
});
};
View example: 查看示例:
<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.