Monaca Onsen UI Discord Chat Github Repo

Onsen UI initialization issue when opening the app

  • 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

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

  • 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.

  • @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-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-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 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 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 width="200px"><img ng-src="{{thumb}}" class="thumbnail"/></ons-col>
                                    <h4>{{ title }}</h4>
                                    <ons-scroller style="height:160px;padding:5px" ng-bind-html="descr"></ons-scroller>
                                <ons-row class="separator"></ons-row>
                                <button class="button button--material--flat" ng-click="tvshowPageDetails(sid)"><ons-ripple></ons-ripple>{{'MORE' | translate}}</button>
    app.controller('ListController', function($scope,$sce,dbService,$cordovaSocialSharing,$translate,SettingsService,$http) {
        var lang = settings.lang || 'en';
        var data;
        var notfirstime = SettingsService.getLS("opened_once");
        ons.ready(function() {
            console.log("ons ready");
                    $scope.listitems = res.num;
                    data =;
                    showsloaded = true;
            } else {
    $scope.ListDelegate = {
            countItems: function() {
                    return $scope.listitems;
                } else return 0;
            calculateItemHeight: function(index) {
                return 310;
            configureItemScope: function(index, itemScope) {
                    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);

  • @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;