Question

我在Ionic 1中有简单的代码。它只是一个itens列表。该列表是可点击的，单击它将带我到一个详细信息页面。但是当我点击右边的手机图标时，我想打电话给那个人。

问题是图标（ng-href属性）中的链接被忽略。如果我删除了ui-sref属性，它就可以了。

有人可以向我解释如何使这项工作？如果解释我的问题，加分点。以下是代码的简化版本：

  <ion-item class="item-icon-right" 
      ng-repeat="e in search(text)" 
      ui-sref="page2({m:e.mat})">
    <h2positive>{{e.name}}
      <a ng-href="tel:+5521{{e.phone}}" 
         class="icon ion-iphone enable-pointer-events" 
         style="text-decoration: none;"></a>
    </h2positive>
  </ion-item>

当然我可以拆分项目，但它会弄乱所有的CSS格式。我想改变一些东西只是为了使e.phone链接工作。

Answer 1

只需使用标记ion-stop-event="click"即可。它没有真正记录在案，但会阻止手机图标上的点击事件“冒泡”＆＃34;到外部的div。这是工作代码：

<ion-item class="item-icon-right" 
  ng-repeat="e in search(text)" 
  ui-sref="page2({m:e.mat})">
<h2positive>{{e.name}}
  <a ng-href="tel:+5521{{e.phone}}" 
     ion-stop-event="click"
     class="icon ion-iphone enable-pointer-events" 
     style="text-decoration: none;"></a>
</h2positive>

Answer 2

这应该有效：

<ion-item class="item-icon-right" ng-repeat="e in search(text)">
    <h2positive ui-sref="page2({m:e.mat})">{{e.name}}</h2positive>
    <a ng-href="tel:+5521{{e.phone}}" 
    class="icon ion-iphone enable-pointer-events" 
    style="text-decoration: none;"></a>
</ion-item>

现在问题是ui-sref重叠ng-href，所以只有ui-sref才有效。

将它们分隔成分离的非重叠元素应该可以解决问题，但您可能需要更改类的样式。

离子：如何使ng-href链接在ui-sref元素内工作？

2 个答案: