Problem with Ionic (v1) using listView and PouchDb

Question

My Ionic app has a listView with maps that users can click on. After clicking, they should see a page with more detailed information. All content is in the pouchDB database (and also remotely in Firebase). The code to create this list is below:

        <div class="card" ng-repeat="challenge in vm.challenges track by $index" ng-class="{'bounceInLeft': $index % 2 !== 0, 'bounceInRight': $index % 2 === 0}" ng-click="vm.goToChallenge(challenge)">
        <div class="item item-text-wrap">
            <div class="resource">
                <img ng-src="{{ challenge.resources[0].image }}" ng-attr-alt="{{ challenge.resources[0].caption }}" ng-srcset="{{ challenge.resources[0].srcset }}" ng-if="challenge.resources && challenge.resources[0].type === 'img'">
                <img ng-src="{{ challenge.resources[0].url | getYouTubeImage }}" ng-attr-alt="{{ challenge.resources[0].caption }}" ng-if="challenge.resources && challenge.resources[0].type === 'video'">
                <i class="ion-play" ng-if="challenge.resources && challenge.resources[0].type === 'video'"></i>
            </div>
            <p class="category">{{ challenge.categoryName }}</p>
            <p class="name">{{ challenge.name }}</p>
        </div>
        <div class="item footer item-divider">
            <div class="row">
                <div class="col col-50">
                    <i class="ion-calendar"></i> {{ challenge.seasonsObjects.join(', ') }}
                </div>
                <div class="col col-50">
                    <div>
                        <i class="ion-bookmark" ng-repeat="bookmark in (challenge.ranking + 1) | range track by $index"></i>
                    </div>
                    {{ challenge.rankingName }}
                </div>
            </div>
        </div>
    </div>

Unfortunately, on iPhone 5 (iOS 10.2) and Samsung Galaxy S4 Mini (Android 4.4), clicking on a card does not display information about this card (see image below). On iPhone 5 and Samsung Galaxy S4 (Android 5), this works correctly (see second image below).

The goToChallenge function is defined as follows in the controller:

vm.goToChallenge = (challenge) => {
    NavigationService.go('home.challenge', {
        challenge: challenge._id
    });
};

NavigationService has the following code:

angular.module('starter').factory('NavigationService', ['$window', '$q', 'ionic', '$state', '$ionicHistory', '$ionicLoading', '$ionicPopup', '$cordovaNativeAudio', '$cordovaSocialSharing', '$cordovaNetwork', '$ionicSideMenuDelegate', '$ionicNavBarDelegate', '$ionicTabsDelegate', NavigationService]);

function NavigationService($window, $q, ionic, $state, $ionicHistory, $ionicLoading, $ionicPopup, $cordovaNativeAudio, $cordovaSocialSharing, $cordovaNetwork, $ionicSideMenuDelegate, $ionicNavBarDelegate, $ionicTabsDelegate) {
let factory = {};
// Set root of history stack to the registration page with historyRoot: true
// Disable animation from slider to registration page to avoid weird transition
// in wich the header bar pops down. This is because we do not have a header bar in the slider
factory.setRootAndGo = (state, params = {}) => {
    $ionicHistory.nextViewOptions({
        historyRoot: true,
        disableAnimate: true
    });
    factory.go(state, params);
};
factory.go = (state, params = {}) => {
    $state.go(state, params, {
        location: 'replace',
        reload: true
    });
};
factory.replace = (state, params = {}) => {
    $ionicHistory.currentView($ionicHistory.backView());
    factory.go(state, params);
};
factory.toggleMenu = () => $ionicSideMenuDelegate.toggleRight();
factory.showTabs = () => {
    $ionicTabsDelegate.showBar(true);
};
factory.hideTabs = () => {
    $ionicTabsDelegate.showBar(false);
};
factory.setTitle = (title) => $ionicNavBarDelegate.title(title);
factory.getParams = () => $state.params;
factory.getNavHistory = () => $ionicHistory.viewHistory();
factory.showLoading = (options) => $ionicLoading.show(options);
factory.hideLoading = () => $ionicLoading.hide();
factory.isWebView = () => ionic.Platform.isWebView();
factory.isOffline = () => factory.isWebView() && $cordovaNetwork.isOffline();
factory.goToWebPage = (url) => $window.open(url, '_system');
factory.shareFacebook = (text, img, url) => {
    let defer = $q.defer();
    $cordovaSocialSharing.shareViaFacebook(text, img, url)
        .then(defer.resolve, defer.reject);
    return defer.promise;
};
factory.shareTwitter = (text, img, url) => {
    let defer = $q.defer();
    $cordovaSocialSharing.shareViaTwitter(text, img, url)
        .then(defer.resolve, defer.reject);
    return defer.promise;
};
factory.playSound = (name) => $cordovaNativeAudio.play(name);
factory.alert = (title, text) => $ionicPopup.alert({
    title: title,
    template: text
});
return factory;
};

Does anyone know how to solve this problem please? I searched for a few days and can not understand why. Thank!

chrome:// ( Genymotion),

TypeError: Object # 'forEach'      ChallengeCtrl.vm.onAfterEnter(:///android_asset/www/build/app.js: 226: 12)     at m. $emit (:///android_asset/www/lib/ionic/js/ionic.bundle.min.js: 178: 407)      Object.q.emit(:///android_asset/www/lib/ionic/js/ionic.bundle.min.js: 470: 20592)      m (:///android_asset/www/lib/ionic/js/ionic.bundle.min.js: 470: 19062)      HTMLElement.g(:///android_asset/www/lib/ionic/js/ionic.bundle.min.js: 470: 18921)      Pf (:///android_asset/www/lib/ionic/js/ionic.bundle.min.js: 70: 477)      HTMLElement.Of.d(:///android_asset/www/lib/ionic/js/ionic.bundle.min.js: 70: 424) ionic.bundle.min.js: 150

onAfterEnter .

    vm.onAfterEnter = () => {
    //let ionViewDOM = $window.document.querySelectorAll('.challenge.pane .scroll-content')[0];
    let ionViewDOM = $window.innerHeight - 43;  // innerHeight minus the heigh of the title bar
    let popovers = $window.document.querySelectorAll('.message-popover');
    popovers.forEach((popover) => {
        //popover.style.height = `${ionViewDOM.clientHeight}px`;
        popover.style.height = ionViewDOM + `px`;
        if (ionViewDOM.clientHeight < 450) {
            popover.classList.add('small-screen');
        } else if (ionViewDOM.clientHeight < 550) {
            popover.classList.add('medium-screen');
        } else {
            popover.classList.remove('small-screen');
            popover.classList.remove('medium-screen');
        }
    });

    let params = NavigationService.getParams();
    ChallengeService.get(params.challenge)
        .then((result) => {
            vm.challenge = result;

            switch (vm.challenge.status) {
                case 'accepted':
                    vm.challengeAccepted = true;
                    break;
                case 'completed':
                    vm.challengeCompleted = true;
                    break;
            }
            NavigationService.setTitle(vm.challenge.gardenType.name);
            vm.challengeLoaded = true;

            ChallengeService.listRandomAvailableForUser(params.challenge, vm.challenge.gardenType.challenges)
                .then((result) => vm.randomChallenges = result);
        });
};

iPhone 5 ( XCode),

: popovers.forEach . ( "popovers.forEach", "popovers.forEach" - undefined)

, popovers. , $window.document.querySelectorAll('.message-popover') ? Div message-popover ( ng-show).

Answer 1

, , foreach. - , SelectorAll ?