view/controller 不会使用 angularjs 中的 socket.io 使用 push() 函数刷新
The view/controller does not refresh with push() function using socket.io in angularjs
我正在尝试刷新 angular 应用程序的控制器以接收来自 socket.io 的对象。一切正常,除了当我使用 push 函数向变量添加新对象时视图不显示。这是我的代码。
Controller.js
app.controller('controller', function(){
var vm = this;
var socket = io.connect('http://localhost:3000');
//The variable that bends
vm.messages = [];
socket.on("addMsg", function(obj){
vm.messages.push({user: obj.user, content: obj.content, color:obj.col});
});
});
view.jade
...
body(ng-controller = "controller as con")
.messages
p Messages:
p(ng-repeat="array in con.messages") content: {{array.content}} , color: {{array.color}}
我的代码有什么问题?目的是使用 ng-repeat 显示 p 标签中的所有内容。
当我尝试更新 socket.on
回调中的 angular 范围变量时,我遇到了完全相同的问题。正如@aw04 在他的评论中提到的那样,解决方法是简单地调用 $scope.$apply()
来自 html5rocks article angular-websocket 的这个微型 angular 工厂套接字服务将 socket.io 包装在 angular 范围内。它执行自动 $rootScope.$apply()
app.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});
我正在尝试刷新 angular 应用程序的控制器以接收来自 socket.io 的对象。一切正常,除了当我使用 push 函数向变量添加新对象时视图不显示。这是我的代码。
Controller.js
app.controller('controller', function(){
var vm = this;
var socket = io.connect('http://localhost:3000');
//The variable that bends
vm.messages = [];
socket.on("addMsg", function(obj){
vm.messages.push({user: obj.user, content: obj.content, color:obj.col});
});
});
view.jade
...
body(ng-controller = "controller as con")
.messages
p Messages:
p(ng-repeat="array in con.messages") content: {{array.content}} , color: {{array.color}}
我的代码有什么问题?目的是使用 ng-repeat 显示 p 标签中的所有内容。
当我尝试更新 socket.on
回调中的 angular 范围变量时,我遇到了完全相同的问题。正如@aw04 在他的评论中提到的那样,解决方法是简单地调用 $scope.$apply()
来自 html5rocks article angular-websocket 的这个微型 angular 工厂套接字服务将 socket.io 包装在 angular 范围内。它执行自动 $rootScope.$apply()
app.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});