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

Question

I have a problem that I update this.customers in my controller but it does not update in the view

The relevant functions are:

//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>

Diagnosis

this.customers prints to the screen 0: will 1: tom But on the Socket 'queue' event the object:

{roomName: "ikp3f"}

is successfully console.logged but the angular view is not updated

I suspect this might have to do with the digest cycle and $apply() - do I need to call $apply() in my SupportCtrl?

Thanks for the help

Don't know if this is the problem, but it seems as if your support module should be dependent on your ecomApp module, but I'd think you'd be seeing a different error. — Joe Enzminger
– Joe Enzminger, Commented Feb 15, 2015 at 9:54
You are specifying array which should contain dependency names in service definition. Just remove the array from .service('SocketFactory', SocketFactory). With this $injector will try to guess your parameters based on their names. — Pavel Horal
– Pavel Horal, Commented Feb 15, 2015 at 9:57
@PavelHoral - that fixes the $rootScope issue - thank you! Now to get the view to update... — javascriptttt
– javascriptttt, Commented Feb 15, 2015 at 9:59

Joe Enzminger · Accepted Answer · 2015-02-15 10:03:30Z

2

Since you are invoking callback with

callback.apply(socket, args);

"this" in the callback will be the socket, not the controller.

Try

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
  })
}

answered Feb 15, 2015 at 10:03

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

javascriptttt Over a year ago

Yes! It works!! Question - I like using controllerAs and 'this' in controllers rather than $scope. Would this be an indication that's not the best idea?

Joe Enzminger Over a year ago

Nope. ControllerAs is becoming a best practice. I think there are rumors that Angular 2.0 is going to do away with scope altogether. "this" can be confusing in javascript regardless.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related