websocketデータでのangularjsコントローラの更新

Question

WebSocketサーバから新しい情報を受け取った後、私のangularjsコントローラを更新しようとしています。私は、WebSocketサーバーとの接続を作成するために、角度のあるWebSocketを使用しています。ここで

は私のコードです：

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

私が開始するためにいくつかのデータと私のコレクション変数を初期化しています。それはうまくいき、それが想定されているようにページに表示されます。ここで

は私のhtmlです：

{ 
"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 
}] 
} 

なぜページは更新されません：

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

私websocketserverは、このJSONを送り返す簡単なTESTSERVERのですか？私のコードはこの例に基づいています： https://angularclass.github.io/angular-websocket/

助けていただければ幸いです。

編集： コントローラをこれに変更しましたが、それでも残念ながら動作しません。

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

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

Answer 1

あなたのコントローラ内でそのサービス変数を「見」し、それに応じて範囲を更新することができます。

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