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);
        });
    }    
}]);

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

页面将加载至显示静态数据（标题、其他文本等），但直到第二次点击当前选项卡我才会看到从 sqlite 返回的数据。我想知道 'deviceready' 是否在页面加载后触发，但我不确定如何解决这个问题。

我试过 this solution 但没有发现任何行为差异。

有其他人运行参与其中吗？如果有，最好的攻击计划是什么？

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);
      });
    });
  }
}

Ionic + cordova-sqlite-storage + deviceready = 过渡时不渲染？

Ionic + cordova-sqlite-storage + deviceready = No render on transition?

angularjs

cordova

ionic-framework

cordova-sqlite-storage