Ionic Development & WP8 Bug Fixes


Recently I was given the task of rewriting a native iPhone app in a hybrid framework so we can could have the app on multiple platforms while only having to manage one codebase. As I didn’t have much experience of app development prior to this, I explored the possible options before committing to one. I tried Cordova/Phonegap & Appcelerator, and found both to be very useful tools, but I opted to use Ionic Framework which is basically Angular built on top of the Phonegap software.

As I already have lots of experience with Angular js, Ionic seemed the natural way for me to go. It integrates with Phonegap very nicely, and comes with some great angular directives already built in to help speed up development.

There is also a fantastic set of tools called ngCordova, which gives you lots of Phonegap functions, such as Geolocation and the ability to use the device’s Camera, but wrapped in Angular style promises.

Throughout the development, I enjoyed working with Ionic and would definitely use it again. I found it very easy to build out and expand upon where necessary. Officially, Ionic supports Android & iPhone, but I have also ran my app on Windows Phone 8 and with a few bug fixes it works nicely.


Windows Phone 8 Bugs

1. Directives wouldn’t work inside <label> tags

I had written my HTML forms with input fields wrapped inside <label></label> elements. This worked fine for Android & ios, but on Windows, custom directives such as a date & timepicker wouldn’t allow ng-click functions to execute.

To get around this problem, I simply replaced all of the <label> wrappers with <div>’s instead and WP8 then worked OK.

2. Windows phone sidemenu links wouldnt work

I used Ionic’s sidemenu template from http://ionicframework.com/getting-started/ to get my app started. When I tested on WP8 devices, clicking the links inside the side menu caused the app to return to the home page. I found the following piece of code which helps get around this:


.config(['$compileProvider', function($compileProvider) {   
	$compileProvider.aHrefSanitizationWhitelist(/^s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
    // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}])

3. Had to make a select directive to prevent WP8 devices double clicking

When clicking a standard HTML select element on a Windows device, the click function would execute twice, meaning that I would select the desired option from the list, and then the list would instantly appear again and not save my previous answer. To fix this, I found another useful snippet which edited the <select> element to only allow a single click.


// Taken from https://github.com/driftyco/ionic/issues/2150
// Prevents double-clicking of select boxes on WP8 phones

angular.module('app.directives.select', [])

.directive('select', function() {
    return {
        restrict: 'E',
        replace: false,
        link: function (scope, element) {
            if (ionic.Platform && ionic.Platform.isWindowsPhone()) {
                element.attr('data-tap-disabled', 'true');
            }
        }
    };
});

4. Had to wrap scope updates from directives in $timeout

In my custom date & time picker directive, I would select a date/time and then the value should be returned to the template and update automatically. This happened on Android & ios, but Windows set the value, but didn’t update the template. To solve this, I simply wrapped the value update in a short $timeout function.


$timeout(function() {
   scope.selectedDateTime = date;
}, 50);

5. $cordova datepicker doesn’t support wp8

At the time of writing this article, the datepicker module from ngCordova doesn’t support WP8 so I used https://github.com/michaelfranz89/cordova-plugin-datepicker for WP8 instead. My datepicker directive can be found here: http://netz.io/blog/making-a-datepicker-directive-in-ionic-framework.

6. Ionic toggle wouldn’t work

I originally used the toggle from here http://ionicframework.com/docs/components/#toggle but I found that on a Windows device, the toggle couldn’t be clicked. All I had to do was switch to the directive version from http://ionicframework.com/docs/api/directive/ionToggle/ and that worked OK!

7. Icon fonts didn’t show

None of the icons were showing on the WP8 version of the app. These include the menu hamburger icon, the back arrow etc. To make them appear, I had to manually include the Ionicons stylesheet in my index.html like so:


<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">


Conclusion

With some fairly simple fixes, Ionic apps work absolutely fine on WP8 devices. I am looking forward to the Windows support being improved by the Ionic team, who say they are working on it and it’s on their roadmap but in the meantime there are ways to work around problems.

My app is currently in the testing phase and should be released shortly on my projects page.


Leave a Reply

Your email address will not be published. Required fields are marked *