Angular 在 socket.io 事件回调中更改模型时视图未更新

Question

我在控制器中更新 this.customers 但在视图中没有更新时遇到问题

相关函数有：

//support.js

(function(){
'use strict';

var SupportCtrl = function($state, SocketFactory){
  this.user = "Will"
  this.customers = ['will','tom']
  SocketFactory.on('queue', function(queue){
    console.log(queue)
    this.customers = queue
  })
}

angular
  .module('support',[])
  .config(['$stateProvider', function($stateProvider){
    $stateProvider
      .state('support',{
        url: '/support',
        templateUrl: 'modules/support/support.html',
        controllerAs: 'support',
        controller: 'SupportCtrl'
      })
  }])

  .controller('SupportCtrl', [
    '$state',
    'SocketFactory',
    SupportCtrl
  ])

})()

//socketService.js

(function(){
'use strict';

var SocketFactory = function($rootScope){
  var socket = io.connect();
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {  
        var args = arguments;
        console.log($rootScope)
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    },
    emit: function (eventName, data, callback) {
      socket.emit(eventName, data, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          if (callback) {
            callback.apply(socket, args);
          }
        });
      })
    }
  };
};

angular
  .module('ecomApp')
  .service('SocketFactory', [
    SocketFactory,
  ]);

})();

//support.html

<div>
  <li ng-repeat="(roomNameKey, roomName) in support.customers">{{roomNameKey}}: {{roomName}}</li>
</div>

诊断

this.customers 打印到屏幕 0：将 1: 汤姆但是在 Socket 'queue' 事件中对象：

{roomName: "ikp3f"}

成功 console.logged 但 angular 视图未更新

我怀疑这可能与摘要循环和 $apply() 有关 - 我需要在我的 SupportCtrl 中调用 $apply() 吗？

感谢您的帮助

Answer 1

因为您正在使用

调用回调

callback.apply(socket, args);

"this" 在回调中将是套接字，而不是控制器。

尝试

var SupportCtrl = function($state, SocketFactory){
  var self = this;
  self.user = "Will"
  self.customers = ['will','tom'];

  SocketFactory.on('queue', function(queue){
    console.log(queue)
    self.customers = queue
  })
}

Angular 在 socket.io 事件回调中更改模型时视图未更新

Angular view not updating when model changed in socket.io event callback

javascript

sockets

angularjs