Hello All,
As i am developing windows phone 8 app using cordova and ionic.
Sidemenu is working great with android and ios but not in wp8.
Link is not working.
My sidemenu code sample is:
<ion-list>
<ion-item nav-clear menu-close href="#/app/link1">
Link 1
</ion-item>
<ion-item nav-clear menu-close href="#/app/link2">
Link 2
</ion-item>
</ion-list>
Any suggestions to tackle this situtation??
Thanks,
Lomas Joshi
We don’t officially support WP8 so there are going to be a few issues here and there.
Can you put together a codepen and make an issue for this
Hello mhartington,
Thanks for your reply, But i have now solved my issue by using ng-click.
As i found in WP8(IE Mobile) “href” attribute is only working with <a></a> tag. so i use ng-click to redirect to another link.
Regards,
Lomas Joshi
Hi Lomas
Have you tried the href links with real wp device? I have the same issue with links and i got them working on emulator using state.go -method in controller. But if i test this on real device state.go doesn’t work (nothing happens) and href gives me an error: An unknown error has occurred. Error: 80020101.
Hello Jukka,
I have implemented it on my app, it’s successfully working.Here’s my app link if you wanna check…
http://www.windowsphone.com/s?appid=4a322683-5517-4150-8280-d27cc626964d
You can use ng-click method on link in sidemenu and use $location.path() to redirect to link.
Here’s my code sample and it’s working great for me.
Menu.html
================================
<ion-side-menu side="left">
<header class="bar bar-header bar-balanced">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header sidemenu" ng-controller="AppCtrl">
<ion-list>
<ion-item nav-clear menu-close ng-click="sidemenu('/app/home')">
<i class="bicon-home"></i>
Home
</ion-item>
<ion-item nav-clear menu-close ng-click="sidemenu('/app/about')">
<i class="bicon-time"></i>
about
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
controller.js
====================================
.controller('AppCtrl', function($scope,$location) {
$scope.sidemenu = function(link){
$location.path(link);
}
});
Let me know if it works for you or not.
Hi Lomas,
Thanks for your reply!
I tried this code, but still didn’t get it working on my device. On emulator it works fine. Are you using AngularUI Router which is default when initializing ionic project?
Here is my route:
.state('tab.calendar', {
url: '/calendar',
views: {
'tab-calendar': {
templateUrl: 'templates/tab-calendar.html',
controller: 'EventCtrl'
}
}
})
Here is my html:
<ion-side-menu side="right">
<ion-content>
<ion-list>
<ion-item menu-close ng-click="navLink()">Test</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
And controller code:
$scope.navLink = function () {
$location.path('/tab/calendar');
}
Thanks for your help!
btw: nice work getting your app published in WP store
Edit:
I’d like to add the fact that i’m testing my app with Lumia 925 windows 8.1 version.
Hello Jukka,
yes i am using default routing.
Have to try specifying controller for the ng-click function?
<ion-content ng-controller="AppCtrl">
AppCtrl is the controller in which you write your redirect function
$scope.navLink = function () {
$location.path('/tab/calendar');
}
And don’t forget to inject $location in the controller as
.controller('AppCtrl', function($scope,$location) {
});
I think it should work for you.
PS: i have not tried my app in Lumia 925. If my app’s side menu is not working with your mobile let me know and i will create plunker for you.
Regards,
Lomas Joshi
Hi
I guess my code should be fine. I have controller defined and also injected $location for it and all works fine in emulator and other devices.
I actually tested your app from store and it’s links doesn’t seem to be working either. For example initial views link buttons makes the app crash 
Maybe there is some deeper problems in Angular + WP or just with Lumia phones.
Anyhow I appreciate your help, thanks!
Hi Jukka,
Thanks for pointing the bug. I have tested it with my windows phone 8 and is working well.
Unfortunately i don’t have windows 8.1 phone to test
I will check if any of my friends had got windows 8.1 phone and fix the issue and let you know.
If you got any solutions on this then let me know too…
Thanks,
Lomas Joshi
Ok it seems that PhoneGap is not having windows 8.1 support yet.
I created new starter app and tested it on wp 8.1 emulator and it’s not even starting. There is some discussion about it:
http://community.phonegap.com/nitobi/topics/phonegap_build_supports_windows_phone_8_1_apps
https://groups.google.com/forum/#!topic/phonegap/JnQ-Cnp1sLc
I even tried to replace the XHRHelper.cs file mentioned in second topic, but no luck.
I guess i’ll have to freeze the windows phone project for now and wait for PhoneGap update.
Hi guys,
I think I’m running into a related issue and you may be able to help.
In my case the application is based on the tabs template and has a state configuration like the following:
$stateProvider
.state(‘intro’, {
url: ‘/intro’,
templateUrl: ‘ui/intro.html’,
controller: ‘IntroCtrl’
})
.state(‘app’, {
url: “/app”,
abstract: true,
templateUrl: ‘ui/tabs.html’,
controller: ‘TabsHeadersCtrl’,
})
.state(‘app.frontpage’, {
url: ‘/frontpage’,
views: {
‘tab-content-0’: {
templateUrl: ‘ui/frontpage.html’,
controller: ‘FrontPageCtrl’
}
}
})
//… etc …
;
$urlRouterProvider.otherwise(’/app/frontpage’);
Also I’ve configured the Angular sanitization whitelists as follows:
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file)|data:image/|/?img//);
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0)|/?app//);
I’m using Ionic 1.0.0-beta11 on Cordova 3.5.0, with a modified XHRHelper.cs (got it from here).
The thing is I got it working on WP8.1 (emulator and device) but the app simply doesn’t start on WP8.0 (emulator). Analyzing the logs I saw that it reaches the TabsHeadersCtrl (from the app abstract state), but it never runs the FrontPageCtrl, which should be loaded by default by $urlRouterProvider.otherwise().
I also tried to enabled traces on the app’s state changes with:
$rootScope.$on(’$stateChangeStart’, function(evt, toState, toParams, fromState, fromParams){
console.log(">> Changing from state " + fromState.name + ", to " + toState.name);
});
$rootScope.$on(’$stateChangeSuccess’, function(evt, toState, toParams, fromState, fromParams){
console.log(">> Completed transition from state " + fromState.name + ", to " + toState.name);
});
But never saw the expected >> Completed transition from state , to app.frontpage at start-up.
Any ideas about why it works on WP8.1 but doesn’t on WP8.0?. How’s possible that the $urlRouterProvider doesn’t redirect to '/app/frontpage' (or so it seems) only on WP8.0?.
Thanks beforehand,
Rafa.
Weird! Now it works without any change to the code. My guess is the tests weren’t performed well and we had some kind of network limitation on the WP8.0 emulator.
Thanks anyway.
@rbarriuso so you got wp8 and 8.1 working on emulator and devices?
Did you experience any other problems with ionic + wp?
Check -
may be help you…
Let me know if any problem with wp8.1
Truth is we’ve still found some issues related with the screen height in WP8.0 and loading the ionicon fonts from a local resource seems to be not possible.
Also we found that collection-repeat doesn’t work on WP.
Let me know if any of these issues sound familiar to anyone.
Also here’s another issue we found on WP: https://github.com/driftyco/ionic/issues/2150