Aktualisierung angularjs Controller mit Websocket-Daten

Question

Ich versuche, meine angularjs Controller nach dem Empfang neuer Informationen von einem Websocket-Server zu aktualisieren. Ich benutze angular-websockets, um die Verbindung mit dem Websocket-Server herzustellen.

Hier ist mein Code:

angular.module('VotingApp', ['ngWebSocket']) 
.factory('MyVotingResults', function ($websocket) { 
    // Open a WebSocket connection 
    var ws = $websocket('ws://localhost:80/test');   

    //defaults 
    var collection = { 
     Question: "This is my question?", 
     Results: [ 
      { Percentage: 0, Picture: "http://www.kvmechelen.be/wp-content/uploads/2015/02/De-Witte.jpg", Player: "Seth De Witte", Number: "4", Position: "Defender", Winner: true }, 
      { Percentage: 0, Picture: "http://www.kvmechelen.be/wp-content/uploads/2016/02/15-16grpsf-037-19715104962_19124904603_o.jpg", Player: "Tim Matthys", Number: "7", Position: "Midfielder", Winner: false }, 
      { Percentage: 0, Picture: "http://www.kvmechelen.be/wp-content/uploads/2016/02/NICOLAS-VERDIER.jpg", Player: "Nicolas Verdier", Number: "99", Position: "Forward", Winner: false } 
     ] 
    }; 

    ws.onOpen(function() { 
     console.log("connectie is open"); 
     ws.send("Hello world!"); 
    }); 

    ws.onClose(function() { 
     console.log("connectie is closed"); 
    }); 

    ws.onError(function() { 
     console.log("error!"); 
    }); 

    ws.onMessage(function (response) { 
     console.log("received an update: ", response); 
     collection = JSON.parse(response.data); 
    }); 

    return { 
     collection: collection, 
     get: function() { 
      ws.send(JSON.stringify({ action: 'get' })); 
     } 
    }; 
}) 
.controller('VotingController', function ($scope, MyVotingResults) { 
    $scope.Data = MyVotingResults.collection; 
}) 

ich meine Sammlung Variable mit einigen Daten am Initialisierung zu beginnen. Das funktioniert und es wird auf der Seite wie es soll gezeigt.

Hier ist mein html:

<div class="content" ng-controller="VotingController"> 
    <div class="vraag"> 
     <p>{{Data.Question}}</p> 
    </div> 
    <div class="antwoorden"> 
     <div class="antw" ng-repeat="result in Data.Results"> 
      <div class="result"> 
       <div class="resultWinner"> 
        <img src="img/winner.png" /> 
       </div> 
       <div class="resultImage"> 
        <img src="{{result.Picture}}" /> 
       </div> 
       <div class="resultBalk"> 
        <p><span class="timer">{{result.Percentage}}</span>%</p> 
       </div> 
      </div> 
      <div class="antwText"> 
       <p><span>{{result.Number}}.</span> {{result.Player}}</p> 
       <p>{{result.Position}}</p> 
      </div> 
     </div> 
    </div> 
</div> 

Mein websocketserver ein einfacher Testserver ist, der diese json sendet:

{ 
"Question": "Who deserves the Man of the Match award?", 
"Results": [{ 
    "Percentage": 25.0, 
    "Picture": "http://www.kvmechelen.be/wp-content/uploads/2015/02/De-Witte.jpg", 
    "Player": "Seth De Witte", 
    "Number": "4", 
    "Position": "Defender", 
    "Winner": false 
}, { 
    "Percentage": 40.0, 
    "Picture": "http://www.kvmechelen.be/wp-content/uploads/2016/02/15-16grpsf-037-19715104962_19124904603_o.jpg", 
    "Player": "Tim Matthys", 
    "Number": "7", 
    "Position": "Midfielder", 
    "Winner": true 
}, { 
    "Percentage": 35.0, 
    "Picture": "http://www.kvmechelen.be/wp-content/uploads/2016/02/NICOLAS-VERDIER.jpg", 
    "Player": "Nicolas Verdier", 
    "Number": "99", 
    "Position": "Forward", 
    "Winner": false 
}] 
} 

Warum wird nicht Seite Update? Ich basierte meinen Code auf diesem Beispiel: https://angularclass.github.io/angular-websocket/

Jede Hilfe wird geschätzt.

EDIT: Ich habe meine Steuerung geändert, aber es funktioniert leider immer noch nicht.

.controller('VotingController', function ($scope, MyVotingResults) { 
    $scope.Data = MyVotingResults.collection; 

    $scope.$watch(function() { 
     return MyVotingResults.collection; 
    }, function (newValue) { 
     $scope.Data = newValue; 
    }); 
}) 

Answer 1

Sie „sehen“, dass Service-Variable in Ihrem Controller und aktualisieren den Umfang entsprechend:

$scope.$watch(function() { 
    return MyVotingResults.collection; 
}, function (newValue) { 
    $scope.Data = newValue; 
});