Question

这是我的完整代码，

    <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>

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

它会打开新标签并致电告诉：+ {{c.contact}}，但为什么{{c.contact}}没有获得价值，比如电话号码？

N.B。我试过ng-click, ng-href, href没有任何作用。

Answer 1

您应该使用ng-click。不是onclick，使用有棱有角的{{}}语法......： - ）

即：

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

或者更好（从@ Martin的答案开始），ng-href：

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

Answer 2

我说我在问题中试过了ng-href, ng-click。是的ng-href是正确的，但我发现问题是另一回事。

我的控制器中有一段代码片段

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

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

在$compileProvider我发现|tel|丢失了，所以在添加此问题后问题得到解决。

Answer 3

点击下面的运行代码段，查看工作示例。

为什么不使用ng-href？

＆＃13;

function ContactController() {
  this.contact = "+1-312-555-0963"; 
}

angular.module('app', []).controller('ContactController', ContactController);

＆＃13;

<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>

＆＃13;

您的移动设备浏览器会看到该链接的协议为tel:，并使用提供的电话号码打开拨号程序。

为什么window.open无法打开电话链接？

3 个答案: