MEAN堆栈和socket.io，表达式评估太快答案

【问题标题】：MEAN stack and socket.io, expressions evaluate too fastMEAN堆栈和socket.io，表达式评估太快
【发布时间】：2015-05-08 19:32:08
【问题描述】：

我很难使用 angular 和 socket.io。访问页面时，我使用 socket.io 连接到服务器 (Node.js)。服务器从 mongoDB 中提取数据，然后将数据发送回以 angular 编写的客户端，而客户端又应使用ng-repeat 显示数据。

admin.hjs:

<body ng-controller="MainCtrl as mc">
   <H1>Admin</H1>
   {{mc.msgs.length}}
   {{mc.msgs}}
   <div ng-repeat="msg in mc.msgs">
       {{msg.name}}
   </div>
</body>

app.js:

(function() {
var app = angular.module('msgsSystem', []);

app.controller('MainCtrl', function(){
    var ctr = this;
    ctr.msgs = [];
    var socket = io.connect();
    //when receiving the msgs from the server
    socket.on('getMsgs', function(data){
        ctr.msgs = data;
        console.log('gotMsgs');
        console.log(ctr.msgs.length);
    });
  });
})();

访问页面时，我看到{{mc.msgs.length}} {{mc.msgs}} 被评估为0 []，但在控制台中gotMsgs 6。我的猜测是页面在响应从服务器返回之前呈现。

如果有任何帮助，我将不胜感激。

【问题讨论】：

我认为问题在于套接字回调不在角度范围内执行，因此当变量发生变化时，角度不知道它并且不会更新您的显示。
在 socket.on() 中放置一个回调函数，用于编译您的消息模板并将数据作为参数传递。这样，只有在收到“getMsgs”数据后才会填充它。

标签： angularjs socket.io mean-stack

【解决方案1】：

如果您在异步方法（套接字、ajax）中更新范围变量，AngularJs 将无法正常工作。 $scope.$apply() 解决了这个问题。

app.controller('MainCtrl', function($scope){
    $scope.msgs = [];
    var socket = io.connect();
    //when receiving the msgs from the server
    socket.on('getMsgs', function(data){
        $scope.msgs = data;
        $scope.$apply();
    });
  });
})();

【讨论】：

谢谢。我只通过 $scope 作为回调参数然后调用 $scope.apply()