Question

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

但是当另一个客户端发送消息时，它的视图会更新所有已推送到模型的积压消息，因此我知道该部分正在运行。只是视图没有更新。

我已经完成了一些阅读，看起来我需要重构我的代码才能使用$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，而且我非常确定我需要，但试图模仿其他解决方案的问题却失败了。

修改以下是观点：

<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不知道新数据已经进入。你是正确的，你需要注入$scope您的控制器，并在您的socket.io回调中执行$scope.$apply()作为最后一个操作。

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

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

Answer 2

以下代码为我工作，每当你从socket获取消息时，你只需要在$ scope中绑定你的代码。$ apply（）function

 socket.onmessage = function (e) {

            $scope.$apply(function () {
                $scope.onMessge(e);
            });

        };

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

2 个答案: