angularjscordovaionic-frameworkcordova-sqlite-storage

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


Since adding the cordova-sqlite-storage plugin and refactoring controllers to something like the following I am seeing strange behavior on transitions between tabs.

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

Everything works/looks great on initial page load but when I transition between tabs I don't see the data from sqlite on the page until I tap the same tab a second time.

The page will load as far as showing static data (title, other text, etc) but I won't see the data returned from sqlite until the second tap of the current tab. I am wondering if 'deviceready' is firing after the page has loaded but I am not sure how to combat that.

I tried this solution but didn't see any difference in behavior.

Has anybody else run into this and if so, what's the best plan of attack?


Solution

  • Since deviceready runs outside of angularjs' context, you have to apply the digestion manually. This case, you can use $scope.$apply to apply scope changes from the apply callback:

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

    The following example has been taken from your example and updated with this technique.

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