Socket.IO消息不更新angular度variables
我有一个与客户端上运行的AngularJS的socket.io客户端服务器设置。
// Server.js var io = require('socket.io')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); });
正如所观察到的,它本质上是以variablesmsg
存储的数据发出message
事件。
然后我有以下客户端代码。
var container = angular.module("AdminApp", []); container.controller("StatsController", function($scope) { var socket = io.connect(); socket.on('message', function (msg) { console.log(msg); $scope.frontEnd = msg; }); });
我现在面临一个奇怪的问题。 当我写下面的代码片段来打印frontEnd
,它不会显示出来。 但是console.log(msg);
工作,它显示了从variablesmsg
发出的数据。
<body ng-app="AdminApp"> <div ng-controller="StatsController"> <p>{{frontEnd}}</p> //Doesn't show anything </div> </body>
谁能帮我吗?
你需要用$scope.$apply(function() {})
来包装模型的变化(改变$scope
属性$scope.$apply(function() {})
,以便更新视图。
var container = angular.module("AdminApp", []); container.controller("StatsController", function($scope) { var socket = io.connect(); socket.on('message', function (msg) { console.log(msg); $scope.$apply(function() { $scope.frontEnd = msg; }); }); });
$ apply()用于从angular度框架外部以angular度执行expression式。 (例如从浏览器的DOM事件,setTimeout,XHR或第三方库)。 因为我们正在调用angular度框架,我们需要执行适当的exception处理范围生命周期,执行手表。
从官方的Angular文档
这可能是因为socket.on('message', function (msg) {..
是出于angular度的知识。
那么如果你的angular度之外的东西,那么你必须告诉angular更新,因为有一些更新
使用$scope.$apply()
后面的$scope.frontEnd = msg;
或者更好的是把它包装在$timeout
中,
$timeout(function() { $scope.frontEnd = msg; });
这里是$timeout
更好的一个很好的解释 。