Question

我很难使用angular和socket.io。访问页面时，我使用socket.io连接到服务器（Node.js）。服务器从mongoDB中提取数据，然后将数据发送回以角度写入的客户端，然后使用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中。我的猜测是，在响应从服务器返回之前，页面正在呈现。

我很感激任何帮助。

Answer 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();
    });
  });
})();

MEAN stack和socket.io，表达式评估得太快

1 个答案: