CODEWITHSUNDEEP
javascriptangularjsionic-framework
neves
neves

Reputation: 39443

Ionic: How to make a ng-href link work inside a ui-sref element?

I have the simple code below in Ionic 1. It is just a list of itens. The list is clickable, clicking in it would take me to a details page. But when I click on the right phone icon, I'd like to phone the person.

The problem is that the link in the icon (ng-href attribute) is being ignored. If I remove the ui-sref attribute, it works.

Can someone explain to me how to make this work? Bonus points if explain me the problem. Here is a simplified version of the code:

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

Sure I could just split the items, but it would mess all the css formatting. I'd like to change something just to make the e.phone link work.

Upvotes: 0

Views: 561

Answers (2)

neves
neves

Reputation: 39443

It is just necessary to use the tag ion-stop-event="click". It isn't really documented, but will prevent the click event on the phone icon to "bubble up" to the outer div. Here is the working code:

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

Upvotes: 2

Deep Singh Baweja
Deep Singh Baweja

Reputation: 418

This should work :

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

Now the problem is ui-sref was overlapping ng-href so only ui-sref was working.

Segregating them into separated non overlapping elements should solve the problem, you might have to change the styling of your classes though.

Upvotes: 1

Related Questions