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

Posted 2023-04-19

【中文标题】Ionic + cordova-sqlite-storage + deviceready = 过渡时没有渲染？

【英文标题】：Ionic + cordova-sqlite-storage + deviceready = No render on transition?

【发布时间】：2018-01-04 20:26:44

【问题描述】：

自从添加了 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 返回的数据。我想知道页面加载后是否会触发“设备就绪”，但我不知道如何解决这个问题。

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

还有其他人遇到过这种情况吗？如果有，最好的攻击计划是什么？

【参考方案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);
      );
    );