0

我想刷新我的角應用程序的控制器從socket.io接收對象。一切工作正常,除了視圖不顯示當我添加一個新的對象與推功能的變量。這是我的代碼。視圖/控制器不刷新使用angularjs中使用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-重複在p標籤的所有內容。

+1

很可能你需要一個$ apply vm.messages.push,因爲它在套接字回調中 – aw04

回答

1

這個來自html5rocks article angular-websocket的小型角度工廠套接字服務在角度範圍內包裹了socket.io。 $ 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); 
      } 
     }); 
     }) 
    } 
    }; 
}); 
0

當我嘗試更新socket.on回調中的角度範圍變量時,我遇到了完全相同的問題。就像@ aw04在他的評論中提到的那樣,修復方法是簡單調用$scope.$apply()