Angular view nicht auf Sockets aktualisieren

Question

Ich entwickle ein Modul der Chat-Anwendung mit Sockeln in Mean Stack. Meine Ansicht in eckigen wird jedoch nicht korrekt aktualisiert. Meine Konsolenprotokolle werden immer in Ordnung und auch die Aussicht bekommt etwas, aber es ist nicht korrekt aktualisiert werden, wie es sollte

html:

<div class="conversation-wrap col-lg-3"> 
    <dummyTag ng-repeat="thread in message"> 
     <div class="media conversation" ng-if="thread.sender._id !== currentUserId"> 
      <a class="pull-left"> 
       <img class="media-object" ng-src="{{thread.sender.profileImageURL}}" data-ng-class="{'active' : $index=== selected}" style="width: 50px; height: 50px;"> 
      </a> 
      <a href="#" ng-click="selectedThread(thread)"> 
       <div class="media-body"> 
        <h5 class="media-heading">{{thread.sender.displayName}}</h5> 
        <small ng-repeat="messageDetails in thread.messages">{{messageDetails.messageBody | limitTo:1}}</small> 
       </div> 
      </a> 
     </div> 
     <div class="media conversation" ng-if="thread.sender._id == currentUserId"> 
      <a class="pull-left"> 
       <img class="media-object" ng-src="{{thread.receiver.profileImageURL}}" style="width: 50px; height: 50px;"> 
      </a> 
      <a href="#" ng-click="selectedThread($index)"> 
       <div class="media-body"> 
        <h5 class="media-heading">{{thread.receiver.displayName}}</h5> 
        <!--         <small ng-repeat="messageDetails in thread.messages">{{messageDetails.messageBody | limitTo:1}}</small> 
--></div> 
      </a> 
     </div> 
    </dummyTag> 
</div> 
<div class="message-wrap col-lg-8"> 
    <div class="msg-wrap"> 
     <div class="alert alert-info msg-date"> 
      <strong>Today</strong> 
     </div> 
     <div class="media msg" ng-repeat="message in message.messages"> 
      <a class="pull-left" href="#"> 
       <img class="media-object" ng-src="{{message.author.profileImageURL}}" style="width: 32px; height: 32px;"> 
      </a> 
      <div class="media-body"> 
       <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small> 
       <h5 class="media-heading">{{message.author.displayName}}</h5> 
       <small class="col-lg-10">{{message.messageBody}}</small> 
      </div> 
     </div> 
    </div> 

Controller:

'use strict'; 

// Create the 'chat' controller 
angular.module('chat').controller('MessageInboxController', ['$scope', '$location', 'Authentication', 'Socket', '$http', '$modal', 
    function($scope, $location, Authentication, Socket, $http, $modal) { 

     $scope.message = []; 
     $scope.text = {}; 

     $scope.LoadInitialData = function() { 
      //Method Call to Get Users on Team 
      $http.get('/api/teamsByUser').success(function(response) { 
       $scope.AllTeams = response; 
      }); 

      //Get All Threads on User 
      $http.get('/api/users/me').then(function(response) { 
       $scope.currentUserId = response.data._id; 
       $http.get('/api/GetAllThreads').then(function(response) { 
        $scope.message = response.data; 
        console.log($scope.message); 
       }); 
      }); //users/me then ending here 
     }; 



     //On Socket message on update converstation 
     Socket.on('UpdateConversation', function(message) { 
      console.log(message); 
      console.log($scope.message); 
      for (var i = 0; i < $scope.message.length; i++) { 

       if ($scope.message[i]._id === message._id) { 
        $scope.message[i].messages.push(message.messages); 
       } 
      } 
     }); 


     $scope.selectedThread = function(index) { 
      $scope.threadData = index; 
      $scope.message.messages = $scope.message[index].messages; 
      console.log($scope.message.messages); 
      // return index; 

     }; 

     //Method to update thread. That is send a new message 
     $scope.UpdateThread = function() { 
      console.log("Getting Here"); 

      if ($scope.currentUserId === $scope.message[$scope.threadData].sender._id) { 
       Socket.emit('UpdateThread', { 
        sendTo: $scope.message[$scope.threadData].receiver, 
        messageBody: $scope.text.messageBody 
       }); 
      } else { 
       Socket.emit('UpdateThread', { 
        sendTo: $scope.message[$scope.threadData].sender, 
        messageBody: $scope.text.messageBody 
       }); 
      } 
      $scope.text = ''; 

     }; 


     //Modal Method to Create a New Message 
     $scope.NewMessage = function() { 

      var modalInstance; 

      modalInstance = $modal.open({ 
       templateUrl: 'modules/chat/client/views/partials/NewMessage.client.view.html', 
       backdrop: true, 
       controller: 'NewMessageController', 
       size: 'md', 
       resolve: { 
        team: function() { 
         return $scope.AllTeams; 
        } 
       } 
      }); 
      modalInstance.result.then(function(result) { 
       // $scope.message = result; 
       // if($scope.message.receiverId === $scope.currentuserId){ 
       // $scope.message.receiverId = result.sender; 
       // } 
      }, function() { 

      }); 
     }; 
} 
]); 

Diese ist, wie meine Ansicht aktualisiert wird, wenn Socket on ausgelöst wird ** (leeres Bild und keine Nachricht. Allerdings, wenn ich die Seite neu lade, bekomme ich das Durcheinander Alter richtig, weil in ng-init ich alle Nachrichten aus der Datenbank bekomme) **. Zuerst dachte ich, es könnte etwas wegen des eckigen Digest-Zyklus sein. Ich habe versucht mit $ scope. $ Gelten auch. Immer noch das gleiche Ergebnis. Ich bin mir ziemlich sicher, dass das etwas mit meinen ng-Wiederholungen zu tun hat. Jede Art von Hilfe wäre willkommen!

[1]: http://i.stack.imgur.com/sUJH3.png 

Answer 1

Es sieht aus wie Sie nur die Zuweisung in Ihrem Socket auf Funktion fehlt. Basierend auf dem Rest des Codes würde ich annehmen, dass Sie die eingehende Nachricht $ scope.message zuweisen möchten.

Answer 2

Lösung Das Problem war nicht mit Array-Push oder irgendetwas. Grundsätzlich habe ich das Benutzerprofil (Bild und andere Details) nicht ausgefüllt. Verfolgte es mit Debugger. Logs gaben keinen Hinweis. Prost!

Answer 3

aktualisieren Sie Socket.on Methode mit dem folgenden Code

//On Socket message on update conversation 
     Socket.on('UpdateConversation', function(message) { 
      console.log(message); 
      console.log($scope.message); 
     $scope.$apply(function() { 
      for (var i = 0; i < $scope.message.length; i++) { 

       if ($scope.message[i]._id === message._id) { 
        $scope.message[i].messages.push(message.messages); 
       } 
      } 
     }); 

     });