Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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;