Angular Binding Bug

Question

i have factory 'Chat' that connect to my nodejs server by socket.io and send message to server.

.factory('Messages', function($ionicScrollDelegate){
    var messages = [];
    return {
      getMessages : function(){
        return messages;
      },
      setMessage : function(msg){
        messages.push(msg);
      }
    }
  })    
.factory('Chat', function(Socket, Messages){
    Socket.on('onChat', function(data){
       if (data.from !== username){
          Messages.setMessage({username : data.from, message : data.msg});
       }
    });
    return : {
       sendMessage: function(msg){
          Messages.setMessage({
             username: username,
             message: msg
          });
          Socket.request(route, {
             rid: 'AA',
             content: msg,
             from: username,
             target: '*'
          }, function() {
          });
    }

and my controller whitch check messages arr from factory.

.controller('livePageCtrl', function($scope, Messages, Chat){
   $scope.data = {};
   $scope.data.message = "";
   $scope.messages = Messages.getMessages();
   $scope.sendMessage = function(msg){
      Chat.sendMessage(msg);
      $scope.data.message = "";
   };
});

and my view form

<div class="chat">
   <div class="row" ng-repeat="message in messages track by $index">
      <div class="col col-100"">
         {{message.message}}
      </div>
    </div>
 </div>
 <input ng-model="data.message" type="text" placeholder="Chat to Room">
 <button type="submit" ng-click="sendMessage(data.message)"></button>

When i typing message and press button to send my arr messages updated and i can see message in the DOM, but if i getting new message from server my messages arr is updated but DOM is not updated. Only after i start typping new message DOM updated and I can see the incoming message. What i do wrong? Why my DOM don't update after new message from server? Thanks to all! And sorry for my english)

service that returns a socket connection

Vadym Kaptan
– Vadym Kaptan

2015-09-25 15:56:47 +00:00
Commented Sep 25, 2015 at 15:56 — Vadym Kaptan
– Vadym Kaptan, Commented Sep 25, 2015 at 15:56

Miles P · Accepted Answer · 2015-09-25 16:21:35Z

1

The issue here is the $digest cycle is not being run, most likely because Angular does not know when new items arrive from the socket. Angular normally runs the $digest cycle automatically such as when ng-click is fired or an $http call resolves. However in this case you'll need to manually invoke this process.

You can try:

Socket.on('onChat', function(data){
   if (data.from !== username){
      $timeout(function(){
          Messages.setMessage({username : data.from, message : data.msg});
      });          
   }
});

Don't forget to import $timeout into your Chat factory.

answered Sep 25, 2015 at 16:21

Miles P

7104 silver badges12 bronze badges

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

1 Comment

Vadym Kaptan Over a year ago

Thank you very much! Helped :)

Collectives™ on Stack Overflow

Angular Binding Bug

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related