I have been struggling this arvo trying to get my ionic app to use the phones (ios or android) calling feature.
Basically adding a href with a tel: type doesn’t work. (ala href=“tel:12345678”). This code does work if used in a simple mobile website. It will open the phones calling screen and populate the number.
I have added the sanitize code to the config and added angular-sanitize to the index.html
Do I need to include any particular cordova plugin to have this work.
Hmm I’ve never done this before so I’m not sure how much help I can be, but theres this article about making phone calls from cordova apps, although it maybe a bit dated.
however I have tried the simpler href like your above and no go. will try it again but reckon i have other issues then.
are you using angular sanitize?
any chance I can see your project or config?
In regards to using angular-sanitize, I think it depends on where this data is coming from. If people are able to add this themselves then I would use it but if its something that you have control over, I don’t see the purpose of it.
Now keep in mind I’ve never used the sanitizer so I’m not an authority on this. I’d suggest you do some research on the sanitizer, dig though the docs and find out if where it fits in.
Off the top of my head, I don’t think you need to add anything else, but I’m not too knowledgeable about making phone calls. @darrenahunter what did you do to set up making phone calls in your app
@darrenahunter and @mhartington
Thanks a lot for your reply!! My problem is resolved. I was checking on ios simulator that’s why the href was not working. I have tested on actual device (iPhone) and it’s working fine!
I’ve been trying this on my Android device and Android emulator, and it does not work.
The links never, ever trigger the phone call - and now I’m starting to loose my hair…
Here’s what I’ve tried: (All of them work on the browser, none works on android emulator nor device - didn’t try in IOS)
<!-- Using ng-href -->
<a class="button" ng-href="tel:{{Phonenumber}}">Call {{Phonenumber}} now!</a>
<!-- Using href -->
<a class="button" href="tel:{{Phonenumber}}">Call {{Phonenumber}} now!</a>
<!-- Using ng-href, concatenating directly -->
<a class="button" ng-href="{{'tel:' + Phonenumber}}">Call {{'tel:' + Phonenumber}} now!</a>
<!-- Not even the most basic link triggers the call -->
<a href="tel:123456789">Call me!</a>
<!-- Also tried to trigger by function, like this: -->
<!-- On template: -->
<a class="button" ng-click="phonecallTab(Phonenumber)"></a>
<!-- on the Controller -->
$scope.phonecallTab = function ( phonenumber ) {
var call = "tel:" + phonenumber;
alert('Calling ' + call ); //Alert notification is displayed on mobile, so function is triggered correctly!
document.location.href = call;
}
All these leads me to believe the problem must be somewhere else. I’ve also tried to customize the permissions of the [project_root]/platforms/android/AndroidManifest.xml, by adding the following just before the </manifest> closing tag.
I couldn’t find a solution to my problem, so I tried a workaround that proved to be quite something.
While searching for solutions to my problem, all problems seem to lead to the WebView, used by Cordova/Phonegap to run the app at runtime. So I seached what other alternatives could exist, and I stumbled upon CrossWalk, which basically runs your app in a Chromium runtime instead of WebView.
My problem (and some other small nuissances) were solved into thin air, and the app became much more “native”-responsive! Can’t wait for the day that the Ionic team absorbs CrossWalk to their CLI!!! (They’re considering it, according to https://github.com/driftyco/ionic/issues/1119).
So, if you’re having the same kind of problems, or are developing for an older set of Android devices (circa Samsung Galaxy SII), or want to use WebGL on your app, my advice is to simply try it.
It seems to open only http/https links. It doesn’t work with geo, tel, mailto…
Well, there is a reason!
Cordova 3.6.0 introduces a second whitelist, for restricting which URLs are allowed to launch external applications. In previous versions of Cordova, all non-http URLs, such as mailto:, geo:, sms: and intent, were implicitly allowed to be the target of an a tag. Because of the potential for an application to leak information, if an XSS vulnerability allows an attacker to construct arbitrary links, these URLs must be whitelisted as well, starting in Cordova 3.6.0.