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

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"。它并没有真正记录在案，但会阻止电话图标上的点击事件“冒泡”到外部 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 工作。

将它们分成单独的非重叠元素应该可以解决问题，但您可能必须更改类的样式。