离子:如何在UI-SREF元素内进行NG-HREF链接起作用

Question

i在离子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正在工作。

将它们隔离为分离的非重叠元素应该解决问题，但是您可能必须更改类的样式。