视图/控制器不会使用 push() 函数刷新,使用 angularjs 中的 socket.io
The view/controller does not refresh with push() function using socket.io in angularjs
我正在尝试刷新我的角度应用程序的控制器以接收来自 socket.io 的对象。一切正常,除了当我使用 push 函数向变量添加新对象时视图不显示。这是我的代码。
控制器.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});
});
});
查看翡翠
...
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 标签中的所有内容。
这个来自html5rocks文章angular-websocket的微小的Angular Factory socket服务将 socket.io 包装在角度范围内。它会自动$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);
}
});
})
}
};
});
当我尝试更新socket.on
回调中的角度范围变量时,我遇到了完全相同的问题。 正如@aw04在他的评论中提到的那样,解决方法是简单地调用$scope.$apply()
相关文章:
- 停止对document.ready函数的重定向/刷新
- 刷新按钮以调用javascript函数
- j查询如何在加载了 load() 函数的页面上进行 POST/AJAX,而无需刷新页面
- 如何等到iframe刷新完成后再执行函数
- 如何使用AJAX函数在不刷新页面的情况下发送表单,我缺少什么?我必须为此使用休息框架吗?
- Javascript 函数在页面刷新时不可用
- onchange 函数需要时间来刷新页面
- 如何将数据从表单传递到 php 函数到 javascript 以在画布上绘制而不刷新页面
- 需要 Ajax 函数 - 在不刷新页面的情况下更新数据库
- 使用 Javascript 在页面刷新时调用函数
- 刷新函数未正确调用 d3
- AJAX/JQuery:提交表单和调用函数而不刷新页面
- 如何在不刷新页面的情况下多次执行构造函数
- jQuery - 刷新每个()函数
- Jquery 移动函数不起作用 == 页面刷新
- 具有剑道网格刷新的回调函数
- 页面刷新函数的回调函数
- 刷新函数内的javascript if语句
- 如何处理IE中多次刷新函数的框背景颜色
- 更新刷新函数中的挖空可观察字符串