IOS 9 Modal not working - angularjs

we are using Ionic framework for an app which runs on ipad device, We have recently migrated to IOS9, several things are not working, Modal dialogues box is not getting opened, it goes to login page which we have declared in otherwise.
$urlRouterProvider.otherwise('login')
The same thing works in IOS8

As mentioned here http://blog.ionic.io/preparing-for-ios-9/
Also, empty href links <a href="#"> will trigger your otherwise state, so test those and remove the empty href if necessary.

Related

Ionic 2 ion-tab shows white screen if clicked twice

Hi I am building an app with Ionic 2 which has a Google Map implementation. Everything works fine with the app except if I am on the map tab and I hit the map tab again the map disappears. Has anyone ran across this issue or know of a fix to stop the map from disappearing?
Below is how I am calling the map
<div #map id="map" ></div>
Thanks
This occur because of a ionic2 bug on tab. When you click twice same tab, the tab reload.
Fortunately, it was fix in the last version.
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
You have to upgrade your ionic2 version to 3.1.1.

Ionic framework UI router bug in Drawer side menu content?

I've been coding an Ionic application using Intel XDK and I'm experiencing a weird issue using the Ionic framework. I am using nested states inside the side content of my drawer template and found a weird behaviour with the latest version of Ionic (1.2.4) which is pulled using Bower.
With the latest version I was getting a weird behaviour where when transition from state 1 to state 2 would look something like this: weird bug
Also when in State 2 the side content would no longer be able to swipe the side drawer open as it did in the previous state.
This is a link to the plunker were it uses the old 1.0.0 beta version of ionic http://embed.plnkr.co/mX9DJRYMfTNHz0bYyMgw/
The state transitions correctly and the second state still allows for the drawer to be swiped open. I obviously don't want to use an older version of ionic because it doesn't support fancy things like pop overs that I would like use in the app.
Thanks,
I was able to solve the problem, For the new version of ionic every state transition is cached. When the state transition occurs the side drawer is left open. This is why in the emulator you see the a weird layer lingering but don't see it on the phone. To close the drawer you must use the menu-close directive. I inserted it inside
<a menu-close ui-sref ="state2">
The menu-close directive will reset the entering view’s
history stack, making the new page the root of the history stack.

When Go to Previous Page using href two pages merge in ionic

I am using ionic for phonegap to build mobile app.
As i have written all code and now when I click back button to returns, some times shows like below attached image.
I have used href="#/pagename" to change page in html.
After long Research I found the solution.Below is the refresh link and the solution.
http://blog.ionic.io/preparing-for-ios-9/
:)

Bootstrap 3 Angular modal popup not processing touch events on mobile devices

Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.

Angular A tags not working on iOS

I have some basic A tags in a menu, I have used UI routers ui-sref="" to add the href attribute.
The HTML generated:
<a target="_self" ui-sref="news" href="/news">News</a>
When clicking this link on a desktop it works every time, but for mobile, it is largely hit and miss, although the tags css hover state does get activated on tap.
I have HTML5 mode enabled, and read that adding target="_self" to the link would fix the issue for this setup, with no luck.
Does anyone know of any reason this would happen?

Resources