实时表AngularJS

Question

我正在使用Twitter流API。我的服务器从混凝土主题标签中获取推文。为此，我使用IO套接字。客户端从套接字接收消息：

＆＃13;

＆＃13;

socket.on('tweet', function(msg) {
  console.log(msg);
  $scope.streaming.push(msg);
});

＆＃13;

＆＃13;

＆＃13;

你可以看到我也在一个名为streaming的表中推送消息。在HTML中我有ng-repeat指令：

＆＃13;

＆＃13;

<table class="table table-bordered table-hover table-striped">
   <tr ng-repeat="tweet in streaming">
      <td>
         <div class="col-lg-2">
            <i class="fa fa-twitter" aria-hidden="true"></i>
         </div>
         <div class="col-lg-10">
            {{tweet}}
         </div>
      </td>
   </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

当推文进来时，表格开始为空并填充。但在页面中没有变化。推文仅在我停止服务器时出现。

为什么会这样？

Answer 1

socket.on回调会耗尽角度消化周期，因此您看不到结果。

因此，您需要通过调用$apply或$timeout来触发摘要周期。

例如：

socket.on('tweet', function(msg){
    console.log(msg);
    $timeout(function(){
       $scope.streaming.push(msg);
    });        
});