javascript - Angular.js - Socket.io 事件更新模型，而不是 View

Question

我有套接字在工作，因为每个客户端似乎都在运行 console.logs 事件的正确代码块。发送消息的客户端会更新 View ，但其他连接的客户端不会。

但是当另一个客户端发送消息时，它的 View 会更新它推送到模型的所有积压消息，所以我知道该部分正在工作。只是 View 没有更新。

我已经阅读了一些内容，看起来我需要重构我的代码以使用 $scope 和 $scope.$apply，但我没有确定如何。

app.controller('StoryController', ['$http', '$scope', function($http, $scope){
    var story = this;

    socket.on('new storyPoint', function(msg){
        //console.log('new storyPoint!', msg);
        story.points.push(msg);
        $('.story').scrollTop($('.story')[0].scrollHeight);
        console.log('last story point:', story.points[story.points.length - 1]);
    });
}]);

如您所见，我实际上尚未使用 $scope，而且我很确定我需要这样做，但尝试模仿此问题的其他解决方案失败了。

编辑:这是 View :

<div class="container story-container" ng-controller="StoryController as storyCtrl">
<aside class="players" id="players"><h1>Players </h1>
    <input name="username" type="text" ng-model="storyCtrl.username"/>
    <ul class="players-list">
        <li>{{storyCtrl.username}}</li>
        <li ng-repeat="player in game.settings.players">{{player}}</li>
    </ul>
</aside>
<div class="main">
    <h1 class="story-title">{{game.settings.title}}</h1>
    <ul class="story">
        <li ng-repeat="storyPoint in storyCtrl.points"><p>{{storyPoint.body}}</p></li>
        <li><p>{{storyCtrl.point.body}}</p></li>
    </ul>
    <form name="storyForm" ng-submit="storyCtrl.addPoint(storyCtrl)">
        <textarea ng-model="storyCtrl.point.body" name="storyPoint" rows="5"></textarea>
        <input class="btn btn-success" type="submit"/>
    </form>
</div>

Answer 1

问题是 Socket.io 并不存在于 Angular 生命周期内，因此 Angular 不知道有新数据进入。你是对的，你需要将 $scope 注入(inject)您的 Controller ，并在您的 socket.io 回调中执行 $scope.$apply() 作为最后一个操作。

$scope.$apply() 让 Angular 知道数据已更新，并刷新需要刷新的内容。

app.controller('StoryController', ['$http', '$scope', function($http, $scope){
    var story = this;

    socket.on('new storyPoint', function(msg){
        //console.log('new storyPoint!', msg);            
        $scope.$apply(function(){
            story.points.push(msg);
            $('.story').scrollTop($('.story')[0].scrollHeight);
            console.log('last story point:', story.points[story.points.length - 1]);             
        });
    });
}]);