Ionic + cordova-sqlite-storage + deviceready = 在过渡时没有渲染?

Question

自从添加cordova-sqlite-storage插件并重构控制器以来，我在选项卡之间的转换上看到了奇怪的行为。

angular.module('blah.controllers').controller('EquipmentCtrl', ['$scope', '$state', 'EquipmentService', 'UtilService', function($scope, $state, EquipmentService, UtilService) {
document.addEventListener("deviceready", getRowsFromDb, false);
function getRowsFromDb() {
EquipmentService.getAllEquipment().then(function(rows) {
$scope.equipmentList = rows;
$scope.equipmentRows = UtilService.chunkArray($scope.equipmentList, 3);
});
}    
}]);

在初始页面加载时一切正常/看起来都很棒，但是当我在选项卡之间转换时，直到我第二次点击同一选项卡，我才在页面上看到来自sqlite的数据。

该页面将加载到显示静态数据(标题、其他文本等(的程度，但在第二次点击当前选项卡之前，我不会看到从 sqlite 返回的数据。 我想知道页面加载后是否触发了"设备就绪"，但我不确定如何解决这个问题。

我尝试了这个解决方案，但没有看到任何行为差异。

有没有人遇到过这种情况，如果是这样，最好的攻击计划是什么？

Answer 1

由于deviceready在angularjs的上下文之外运行，因此您必须手动应用消化。在这种情况下，您可以使用$scope.$apply从应用回调应用范围更改：

$scope.$apply(function () {
// do scope things here
});

以下示例取自您的示例，并使用此技术进行了更新。

angular.module('blah.controllers', [])
.controller('EquipmentCtrl', [
'$scope',
'$state',
'EquipmentService',
'UtilService',
EquipmentCtrl
]);
function EquipmentCtrl($scope, $state, EquipmentService, UtilService) {
document.addEventListener("deviceready", getRowsFromDb, false);
function getRowsFromDb() {
EquipmentService.getAllEquipment().then(function(rows) {
$scope.$apply(function() {
$scope.equipmentList = rows;
$scope.equipmentRows = UtilService.chunkArray($scope.equipmentList, 3);
});
});
}
}