View/controller не обновляется с помощью функции push(), используя socket.io в angularjs

Question

Я пытаюсь обновить контроллер моего углового приложения до получения объектов из socket.io. Все работает отлично, за исключением того, что представление не отображается, когда я добавляю новый объект к переменной с помощью функции push. Вот мой код.

Controller.js

app.controller('controller', function(){ 
var vm = this; 
var socket = io.connect('http://localhost:3000'); 
//The variable that bends 
vm.messages = []; 

socket.on("addMsg", function(obj){ 
    vm.messages.push({user: obj.user, content: obj.content, color:obj.col}); 
}); 


}); 

view.jade

... 
body(ng-controller = "controller as con") 
.messages 
    p Messages: 
    p(ng-repeat="array in con.messages") content: {{array.content}} , color: {{array.color}} 

Что случилось с моим кодом ?, цель состоит в том, чтобы показать все содержимое в р теге, используя нг-повтор.

Answer 1

Эта крошечная угловая фабричная служба гнезд от html5rocks article angular-websocket обертывает socket.io в угловом пространстве. Он использует auto $ rootScope. $ Apply()

app.factory('socket', function ($rootScope) { 
    var socket = io.connect(); 
    return { 
    on: function (eventName, callback) { 
     socket.on(eventName, function() { 
     var args = arguments; 
     $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); 
      } 
     }); 
     }) 
    } 
    }; 
}); 

Answer 2

У меня была такая же проблема, когда я пытался обновить угловую переменную области внутри обратного вызова socket.on. Так же, как @ aw04 упомянул в своем комментарии, исправить было, чтобы сделать простой звонок $scope.$apply()