Angular.js - Socket.io事件更新模型，无法查看 [英] Angular.js - Socket.io event updates model, not view

问题描述

我有插座的工作，在每个客户端似乎运行正常code块console.logs事件。发送该消息的客户端更新视图，但是其他连接的客户端不知道。

I have sockets working, in that each client seems to be running the proper code block that console.logs the event. The client that sends the message updates the view, but the other connected clients don't.

但是，当其他客户端发送消息时，它与所有它一直推到模型积压的消息视图更新，所以我知道这部分工作。这只是这不是更新视图。

But when another client sends a message, its view updates with all the backlogged messages that it's been pushing to the model, so I know that part is working. It's just the view that's not updating.

我已经做了一些阅读，它看起来像我需要重构我的code使用 $范围和 $范围。 $适用，但我不知道怎么样。

I've done some reading, and it looks like I need to refactor my code to use $scope and $scope.$apply, but I'm not sure how.

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

正如你所看到的，我没有实际使用 $范围着呢，我是pretty知道我需要的，但试图模仿其他解决方案这个问题已失败。

As you can see, I'm not actually using $scope yet, and I'm pretty sure I need to, but trying to mimic other solutions to this problem has failed.

编辑：
而这里的观点：

And here's the 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>

推荐答案

的问题是，Socket.io不活角的生命周期内，因而角不知道新的数据进来，你说得对，你需要注入 $范围到控制器，并执行 $范围。$适用（）您的插槽内.IO回调，作为最后的措施。

The issue is that Socket.io does not live inside the angular lifecycle, and thus Angular doesn't know new data has come in. You're right that you need to inject $scope into your controller, and the perform a $scope.$apply() inside your socket.io callback, as the last action.

$范围。$适用（）让角知道，数据更新，并刷新哪些需要被刷新。

$scope.$apply() lets angular know that data has updated, and to refresh what needs to be refreshed.

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

这篇关于Angular.js - Socket.io事件更新模型，无法查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！