javascript - AngularJS-在外部AngularJS服务变量上使用$ watcher时的奇怪行为

在控制器构造函数中，我调用以下函数：

  constructor(private $scope, private $log : ng.ILogService, private lobbyStorage, private socketService) {
  this.init();
}

private init(){
  this.lobbyData = [];
  this.initializeLobbyData();

  // DOM related initialisation
  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){
        // Delete 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>&nbsp' +  newValue.body.data[i].body.message + '<br></span>'));
        }
      }

    }
  );

  this.socketService.setUpWebsocketService();

}

这是一个使用websocket的angularjs服务的外部变量。
当我在浏览器（chrome）中调试代码时，$watcher的回调函数会被调用两次，并最终将数据加载到聊天窗口。

一旦我在没有调试器的情况下运行web应用程序，数据就不会被加载。

我需要做的是点击页面上的按钮。出于某种原因，与页面的任何交互（如按钮、anker）似乎都会导致向聊天窗口显示数据。

当我在调试器窗口中时，不需要相同的交互。数据加载时不需要我的任何交互。
有人对此有解释吗？

最佳答案

这是因为$watch只在摘要循环中运行，即有人调用$scope.$apply()之后。Angular在ng-click发生时为您执行此操作，但WebSocket库可能不会执行此操作，因此每当结果通过WebSocket返回时，必须手动调用$scope.$apply()。
另请参见AngularJS' $scope documentation。
无关：小心，您的$('<span>'... + someUserName)行可能是您的服务中的一个xss漏洞，允许用户从他们的聊天消息中插入标签。

关于javascript - AngularJS-在外部AngularJS服务变量上使用$ watcher时的奇怪行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32011816/