CODEWITHSUNDEEP
javascriptangularjsionic-framework
Md. Nahiduzzaman Rose
Md. Nahiduzzaman Rose

Reputation: 442

Why window.open not working to open a phone call link?

Here is my full code,

    <div data-ng-repeat="cont in contacts  | filter: searchText">
 <h4 class="contacts" style="border-bottom: none;">{{cont._id}}</h4>
 <ul>
      <li data-ng-repeat="c in cont.subgroup" class="contacts">
       <div class="contact_person">
         <img ng-src="https://127.0.0.1/uploads/pp/{{c.empic}}" onerror="this.src='https://hive.robi.com.bd/uploads/logo.png'" />
         <div class="contact_info info">
             <p class="contInfo">{{c.name}}</p>
             <p class="contInfo">{{c.contact}}</p>
             <p class="contInfo">{{c.email}}</p>
         </div>
       </div>
       <div class="call">

    <a onclick="window.open('tel:+{{c.contact}}')"><img src="img/call.png"                  id="callImg"></a>

         </div>         
         </li>
        </ul>

    </div>

In <a onclick="window.open('tel:+{{c.contact}}')"><img src="img/call.png" id="callImg"></a>

it opens new tab and calls tell:+{{c.contact}} but why {{c.contact}} is not getting the value , like a phone number?

N.B. I tried ng-click, ng-href, href nothing works.

Upvotes: 0

Views: 2362

Answers (3)

Md. Nahiduzzaman Rose
Md. Nahiduzzaman Rose

Reputation: 442

I said i tried ng-href, ng-click in my question . Yes ng-href is correct but I found that the problem was something else.

There was a code snippet in my controller

.config(function($provide, $stateProvider, $urlRouterProvider, $httpProvider, $ionicConfigProvider, $compileProvider) {

 $compileProvider.aHrefSanitizationWhitelist(/^\s*(http?|ftp|mailto|file|tel|ghttps?|ms-appx|x-wmapp0):/);
  ....
  ....
  // more codes
 }

In $compileProvideri found that |tel| was missing, so after adding this the issue got fixed.

Upvotes: 1

Martin
Martin

Reputation: 16302

Click Run code snippet below to see a working example.

Why not just use ng-href? 

function ContactController() {
  this.contact = "+1-312-555-0963"; 
}

angular.module('app', []).controller('ContactController', ContactController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ContactController as c">
    
    <a ng-href="tel:{{c.contact}}">
        <img src="img/call.png"  alt="Dial {{c.contact}}" />
    </a>
  
</div>

Your mobile device browser will see that the protocol of the link is tel: and open the dialer application with the provided phone number.

Upvotes: 0

MarcoS
MarcoS

Reputation: 17711

You should use ng-click. not onclick, to use angular {{}} syntax... :-)

I.e.:

<a ng-click="window.open('tel:'{{c.contact}})">...</a>

Or, yet better (as from @Martin's answer), ng-href:

<a ng-href="tel:{{c.contact}}">...</a>

Upvotes: 1

Related Questions