After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:
$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave
Documentation: (http://ionicframework.com/blog/navigating-the-changes/)
Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?
Events Fired:
$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter
I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.
<div ng-controller="fbMenuController">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content scroll="true">
<div ng-repeat="Group in fb.Model.MenuGroups">
<ion-item class="item-divider">{{Group.Name}}</ion-item>
<!-- href="#/Main/{{Page.Name}}" -->
<a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
{{ Page.Name }}
</a>
</div>
</ion-content>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
<div class="buttons">
<button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
</div>
<h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
</ion-header-bar>
<ion-content scroll="true">
<ion-nav-view name="Main">
</ion-nav-view>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</div>
If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:
$scope.$on("$ionicNavView.leave")
This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".
On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.
Solution:
On MAIN controller I added:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (fromState.name === 'name-of-leaving-state') {
//your code here, similar behavior with .$on('$ionicView.leave')
}
});
Hope it helps
I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:
If a view leaves but is cached, then this event will not fire again on
a subsequent viewing.
It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.
See docs here.
Found the problem. The 'Main' state was defined without the attribute
abstract: true
this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.
I know this is quite old, however i wanted to add that on Ionic v1.3.4 (the last version) the $ionicView.beforeEnter && $ionicView.afterEnter all work. I mention this because others have commented that v1.3.x was having issues with controller views for .beforeEnter and .afterEnter. But I don’t ever recall having issues on any version of 1.3.x.
That being said, I came to this thread because I am updating an older ionic v1 app and ran into a problem where the $ionicView.beforeEnter was not firing and I could not figure out why. It turns out the template that goes with that controller was missing closing HTML tags on a few <i class="icon> elements…I didn’t add the closing </i>
Thus, apparently, certain elements missing a closing tag was preventing the controller $ionicView.beforeEnter/afterEnter functions from firing. Don't know if its all tags or specific tags but I can say I had NEVER seen that before so it took me a while to figure out the issue was in my template and not in my controller.
For what its worth, hope my discovery helps those in the future.
I'm adding social buttons for every post link in a web site where some post links are shown at once.
The problem is that sometimes some buttons are not shown and keep waiting for a response. I've tried with some browsers and computers and it's happening sometimes with any of them.
I'm adding the buttons like this:
<div class="social">
<div class="twitter">
Twittear
</div> 
<div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=box_count&action=like&colorscheme=light&locale=es_ES" scrolling="no" frameborder="0" style="height:62px; width:74px" allowtransparency="true"></iframe></div>
<g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone>
</div>
This is the web page: http://nosabesnada.com/ultimas-noticias/
Any idea of why it is sometimes happening and how to solve it?
i'm working on a restaurant's website and have run into this annoying problem when visiting the site on my phone. here's what i see: http://i.imgur.com/rc1sS.png (reproducible in iOS5, iOS6, some Androids)
the menus are .JPG's loading in Twitter Bootstrap modals, and the code looks like this:
<div id="menu" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img src="assets/menus/brunch.jpg">
</div>
</div>
<a data-toggle="modal" href="#menu" >BRUNCH</a></p>
everything loads fine in all desktop browsers, and weirdly enough they appear on the mobile Chrome app in iOS6. i've asked a couple of my Android using friends, and it's about 50%. i have no idea why there doesn't seem to be a pattern. is it an issue with how the images are being called? (i don't think it has anything to do with the modal itself?)
help!
ok, turns out the images were CMYK, which mobile does not like. changed to RGB and everything loads fine now!
I am using an iPhone 3GS for development and my app consists of 5 pages (data-role="page") 2 of them are dialogues (data-rel="dialogue") and the rest are links on my footer's navbar.
What I am experiencing is very slow transitions when a link is tapped.
Javascript itself is running smoothly, performing it's operations as it should without delay (alerts are instant when bound on "touchsrart" event). The actual links though are incredibly slow.
Anyone experiencing similar problems and/or has found a way to tackle them?
Thanks in advance :)
EDIT: forgot to mention -> sometimes a link gets 'stuck' before getting resolved which results in 2 'active' links (which UI-wise is aweful) and you actually need to re-tap it to make it work.
EDIT 2: posting footer bar whos links are particularly slow:
<div class = "footer-wrapper">
<div data-role="footer" class="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><span>Option 1</span></li>
<li><span>Option 2</span></li>
<li><span>Information</span></li>
</ul>
</div>
</div>
</div>
Second option's button is the active one as I grabbed the code from page #2.
So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');