Within the constructor of my controllers, I execute the following function:
constructor(private $scope, private $log : ng.ILogService, private lobbyStorage, private socketService) {
this.init();
}
private init(){
this.lobbyData = [];
this.initializeLobbyData();
// Initialization related to the DOM
this.chatWindow = $('.chat-output');
var self = this;
this.$scope.$watch(
function () {
return self.socketService.chatHistory
},
function (newValue, oldValue) {
if(typeof newValue.body !== "undefined" && newValue.body.data.length > 0){
// Clear existing records
self.chatWindow.empty();
for (var i = 0; i < newValue.body.data.length; ++i) {
console.log(newValue.body.data[i].body.userName)
self.chatWindow.append($('<span><strong>' + newValue.body.data[i].body.userName + '</strong> ' + newValue.body.data[i].body.message + '<br></span>'));
}
}
}
);
this.socketService.setUpWebsocketService();
}
This function is designed to monitor an external variable from an AngularJS Service that utilizes websocket.
During debugging in the browser (Chrome), the callback function of the $watcher gets triggered twice and ultimately populates the data into the chatWindow.
https://i.stack.imgur.com/6ChRO.png
However, when I run the web app without the debugger, the data fails to load.
https://i.stack.imgur.com/89v32.png
In order for the data to display in the chatWindow, I need to interact with the page by clicking a button or link. Strangely, any form of interaction (e.g., button, anchor) on the page triggers the data loading.
https://i.stack.imgur.com/rbie8.png
This behavior does not occur when I am actively debugging in the window. The data loads automatically without any user interaction required.
Can anyone offer an explanation for this phenomenon?