我正在使用angularJS和一个使用socketio发送数据的节点后端。然后我尝试使用ng-repeat显示数据。如果我初始化控制器内的数据,那么ng-repeat工作正常,但是如果我从服务器接收数据时添加数据,那么当使用ng-repeat时屏幕上不会显示任何内容。
以下是我正在使用的代码片段: (trans.html)
<div id='trans' ng-app='MyApp'>
<h1>Transactions</h1>
<div class="pure-g-r" ng-controller='TransController'>
<div class="pure-u-1-2" ng-repeat="trans in transactions">
<h1>{{ trans.name }}</h1>
<p>{{ trans.description}}</p>
<p>{{ trans.date }}</p>
<p>{{ trans.category }}</p>
</div>
</div>
</div>
<script src="/js/loadAngular.js"></script>
(controller.js)
function TransController($scope, socket) {
$scope.transactions = [];
$scope.currentMonth = "March";
$scope.categories = [];
init();
function init() {
console.log("emitting init functs");
socket.emit('data', {request: 'transactions', month: $scope.currentMonth});
socket.emit('getCategories', {});
};
socket.on('dataResponse', function (data) {
console.log(data);
if(data.response === 'transactions'){
$scope.transactions = [];
var tran = data.data;
for(var i = 0; i < tran.length; i++){
$scope.transactions.push(tran[i]);
console.log(tran[i]);
};
}
console.log($scope.transactions);
console.log("CURRENT MONTH " + $scope.currentMonth);
});
(server.js)
var myTransactions = {
January : [{
name: "Tesco shopping",
date: "January",
description: "This is my description, I went to the shop and bought loads of food.",
category: "Food"
}],
February : [],
March : [{
name: "Booze shopping",
date: "March",
description: "This is my description, I went to the shop and bought loads of food.",
category: "Food"
},{
name: "Tesco shopping",
date: "March",
description: "This is my description, I went to the shop and bought loads of food.",
category: "Food"
}],
...
};
mudev.addCustomEvent('data', function(socket,data){
var request = data.request;
var month = data.month;
console.log("Data Request: request:",request, " month:",month);
if(month==null){
socket.emit('dataResponse', {
response: 'transactions',
data: myTransactions
});
}else{
socket.emit('dataResponse', {
response: 'transactions',
data: myTransactions[month]
})
}
});
我可以在数据之间看到的唯一区别是,当我静态初始化控制器内部的数据时,有一个名为“HashKey”的额外密钥,当从服务器发送数据时,该密钥不存在。 我再次阅读了角度文档,但无法找到有关此问题的任何内容。
非常感谢任何帮助。 (这与此ng-repeat over an array of objects)
的问题不同答案 0 :(得分:1)
$ $范围应用();
用于函数回调。
答案 1 :(得分:0)
正如Eugene P建议的那样,添加$ scope。$ apply()刷新视图以更新数据。将此添加到dataResponse回调的末尾会更新屏幕上的数据。
这篇文章(我已经忘记了)使用有角度的socketio更详细地解释。 http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
感谢您的回答:)