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, до второго касания текущей вкладки. Мне интересно, срабатывает ли "deviceready" после загрузки страницы, но я не уверен, как с этим бороться.

Я попробовал это решение, но не увидел никакой разницы в поведении.

Кто-нибудь еще сталкивался с этим, и если так, каков лучший план нападения?

Answer 1

Поскольку deviceready работает вне контекста angularjs, вы должны применить пищеварение вручную. В этом случае вы можете использовать $scope.$applyчтобы применить изменения области действия от обратного вызова 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);
      });
    });
  }
}