使用 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 是一个简单的测试服务器，它会发回这个 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;
});