在我的应用程序中,我必须获取一些
JSON数据,并在页面加载之前将其分配给一个数组.这是我使用CardService服务获取JSON的代码：
cards = [];
var cs = {
...
fetchCards: function() {
var d = $q.defer();
$http.get("data/cards.PHP").success(function(data) {
cards = data;
d.resolve();
}).error(function(data,status) {
d.reject(status);
});
return d.promise;
},getCards: function() { return cards; };
...
}
在控制器的解决方案中,我有以下几点：
WalletController.resolve = {
getCards: function(CardService) {
CardService.fetchCards().then(loadView,showError);
}
}
而在实际的控制器中,我有以下几点：
function WalletController($scope,CardService) {
$scope.cards = CardService.getCards();
}
问题是,服务中的fetchCards函数似乎解决了将JSON数据分配给卡片变量之前的承诺.这导致我的视图加载空白数据,直到我刷新几次并幸运.
我可以确认迟到的加载,当我将卡变量记录在控制台中时,我在第122行(我的视图加载时)得到一个空数组,第57行(当JSON调用成功时)的完整数组.视频加载后,第57行的代码以某种方式执行.
我该如何解决？
解决方法
我没有使用解决方案,但是我把它丢在那里,以防万一你遇到的问题与绑定到服务返回的数组有关.
如果您从服务返回您的卡阵列并在UI中绑定它,您可能需要尝试填充相同的数组,而不是设置cards = data; (它将覆盖没有绑定到UI的新数组的本地卡).
就像是：
fetchCards: function() {
var d = $q.defer();
$http.get("data/cards.PHP").success(function(data) {
cards.length = 0;
for(var i = 0; i < data.length; i++){
cards.push(data[i]);
}
d.resolve();
}).error(function(data,
请参阅this fiddle了解我正在尝试描述的工作示例.单击第一个按钮多次将更新视图,但一旦您单击第二个按钮,绑定将被破坏.
两者的主要区别是：
>第一个按钮使用data.length = 0和data.push()来保留原始数组的引用
>第二个按钮使用data = newArray覆盖原来的数据数组引用
更新：另外,像下面提到的Mark Rajcok一样,您可以使用angular.copy通过清空原始数组的引用并从源中添加新的引用来保留原始数组的引用：
fetchCards: function() {
var d = $q.defer();
$http.get("data/cards.PHP").success(function(data) {
angular.copy(data,cards);
d.resolve();
}).error(function(data,