Onsen UI initialization issue when opening the app

[jcdenton]

Hi, I am creating an application using Onsen UI using the latest build (onsenui v2.0.0 - beta.6 - build.2051) and noticed something weird.

The 1st time I open the application it runs successfully. If I close it by pressing the back button and reopen it then it seems that Onsen and/or Angular does not initializes correctly. There are no errors in the console and the controller of the 1st page doesn’t get called (or run). On the other hand, if I remove the app from the task manager (recent apps) and open it again then it runs successfully again.
There are two screenshots showing this behavior: the 1st one is when opening the app for the 1st time after removing it from recent apps, while the 2nd picture is what I get when I reopen the app without removing it from recent apps.

Any advice on why is that happening?

Thanks in advance

[Leonardo Augusto]

@jcdenton i guess the problem is how you are “calling” the angular file , which is loading your content!

[munsterlander]

I would agree. Its a bit difficult to diagnose without your code though. Maybe if you can provide some sections, we can take a look at it.

[jcdenton]

@Leonardo-Augusto , @munsterlander ,

Hey, thanks. I am posting the controller of the first page to take a look. I use ons-lazy-repeat="TVshowDelegate" to build a list with shows. Each list item is actually a carousel with two items (action buttons on the back and the show info in the front). When the app opens, I check the database for saved shows in the user’s collection and show them in the list. dbService functions are using $q.defer() in order to get a response when they are done querying the database. SettingService is a factory service which manages localStorage items (it has two main functions setLS and getLS). The rest of the controller has functions that are being called on click events. I get the same behavior if I replace the on-lazy-repeat method with a normal list using ng-repeat Thanks for any help.

<ons-list>
   <ons-carousel var="listitem" class="card" ons-lazy-repeat="ListDelegate" ng-show="listitems > 0" initial-index="1" swipeable auto-scroll auto-refresh>
       <ons-carousel-item class="list-action-menu">
                        <ons-row>
                            <ons-col style="text-align:center;">
                                <ons-button class="show_carousel_item_action_btn delete" ng-click="deleteShow($index)"><ons-icon size="26px" icon="md-delete" fixed-width="false" style="line-height:inherit;"></ons-icon></ons-button>
                            </ons-col>
                            <ons-col style="text-align:center;">
                                <ons-button ng-click="shareTvShow($index)" class="show_carousel_item_action_btn share"><ons-icon size="26px" icon="md-share" fixed-width="false" style="line-height:inherit;"></ons-icon></ons-button>
                            </ons-col>
                            <ons-col style="text-align:center;">
                                <ons-button class="show_carousel_item_action_btn"><ons-icon size="26px" icon="md-refresh" fixed-width="false" style="line-height:inherit;"></ons-icon></ons-button>
                            </ons-col>
                        </ons-row>
                    </ons-carousel-item>
                    <ons-carousel-item>
                        <ons-row>
                            <ons-col width="200px"><img ng-src="{{thumb}}" class="thumbnail"/></ons-col>
                            <ons-col>
                                <h4>{{ title }}</h4>
                                <ons-scroller style="height:160px;padding:5px" ng-bind-html="descr"></ons-scroller>
                            </ons-col>
                            <ons-row class="separator"></ons-row>
                            <button class="button button--material--flat" ng-click="tvshowPageDetails(sid)"><ons-ripple></ons-ripple>{{'MORE' | translate}}</button>
                        </ons-row>
                    </ons-carousel-item>
                  </ons-carousel>
			</ons-list>

app.controller('ListController', function($scope,$sce,dbService,$cordovaSocialSharing,$translate,SettingsService,$http) {

    var lang = settings.lang || 'en';
    $translate.use(lang);
    var data;
    var notfirstime = SettingsService.getLS("opened_once");
    
    ons.ready(function() {
        console.log("ons ready");
        if(notfirstime){
            dbService.getAllShowsFromDB().then(function(res){
                $scope.listitems = res.num;
                data = res.data;
                showsloaded = true;
            });
        } else {
            $scope.listitems=0;
            dbService.createTables().then(function(res){
                SettingsService.setLS("opened_once",true);
            });
        }
    });
$scope.ListDelegate = {
        countItems: function() {
            if(showsloaded){
                return $scope.listitems;
            } else return 0;
        },
        calculateItemHeight: function(index) {
            return 310;
        },
        configureItemScope: function(index, itemScope) {
            if(showsloaded){
                itemScope.sid = data.item(index).id;
                itemScope.thumb = data.item(index).thumb;
                itemScope.title = data.item(index).name;
                itemScope.descr = $sce.trustAsHtml(data.item(index).descr);
            } else {console.log('loading');}
        },
        destroyItemScope: function(index, itemScope) {
            console.log('Destroyed item with index: ' + index);
        }
    };

[Leonardo Augusto]

@jcdenton said:

The 1st time I open the application it runs successfully
If I close it by pressing the back button and reopen it then it seems that Onsen and/or Angular does not initializes

If not first time shows loaded , else $scope.tvshowsitems=0;