用websocket数据更新angularjs控制器

Question

我试图在从websocket服务器接收到新信息后更新我的angularjs控制器。我正在使用angular-websockets创建与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：

<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是一个简单的TESTSERVER发送回该JSON：

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

为什么不会页面更新？我基于我的代码在这个例子： 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; 
});