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 theon-lazy-repeat
method with a normal list usingng-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); } };
-
@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 initializesIf not first time shows loaded , else $scope.tvshowsitems=0;