Creating a functional hyperlink within a ui-sref element in Ionic

I'm struggling with a simple code snippet in Ionic 1. It basically shows a list of items that are clickable to navigate to a details page. However, I want to add functionality so that when clicking on the phone icon next to each item, it will initiate a call to the person associated with that item.

The issue I'm facing is that the link within the ng-href attribute for the phone icon is being ignored when the ui-sref attribute is present. If I remove the ui-sref attribute, the phone link works fine.

Can someone provide guidance on how to resolve this issue? I would appreciate if you could also explain why this conflict is happening. Below is the 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>

I could separate the items to make it work, but it would disrupt the CSS formatting. My goal is to find a solution that allows me to keep everything intact and still have the e.phone link functional.

javascriptangularjsionic-framework

Answer №1

One way to handle preventing the click event on a specific element is by including the ion-stop-event="click" tag. Even though this method may not be well-documented, it effectively stops the click event from propagating to the parent div. Below is an example of how this can be implemented:

<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

Here is a possible solution:

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

The issue arose when ui-sref and ng-href were conflicting, causing only one to work.

To fix this problem, separating them into distinct elements that do not overlap should resolve it, although you may need to adjust the styling of your classes accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring a variable from an Angular 2 constructor into the template via the then statement

I'm struggling with implementing a secure login system. My goal is to first check the device's native storage for an item named 'user', then verify if the user exists in our database, and finally retrieve the unique id associated with t ...

javascriptangulartypescriptionic2

Combining two arrays without using concatenation, each from separate arrays but sharing one common variable

I'm struggling to combine two arrays in a specific manner and can't quite figure out the correct syntax to achieve this. primaryData = [1,2] secondaryData = [3,4] label = [label1, label2] Currently, I have this working data = $.map(la ...

javascriptarrays

AngularJS view fails to reflect updates in the model

This issue with Angular has been widely discussed online, but I ask for your patience. I have tried various solutions without success. Here is a simplified version of my code: View: <div ng-hide="{{beHidden}}"></div> Controller: // Set beHi ...

javascriptangularjsionic-framework

Enhancing Nextjs performance for mobile devices

Greetings everyone, I am currently experiencing performance issues on mobile devices. Can anyone provide suggestions on how to enhance the following aspects? https://i.stack.imgur.com/bEmln.png ...

javascriptnode.jscdn

Choosing a recently inserted row in jqGrid

After reloading the grid, I am trying to select the newly added row, which is always added at the end. However, it seems impossible to do so after the reload. Is there a reliable way to select the last row after reloading the grid? The current code I have ...

javascriptjqueryjqgrid

Problem with fetching Grails

I have a table nested within an anchor tag. The table is centered on the page, with each row containing an image. When the page loads, I noticed the following: a) The table initially appears at the top-left corner of the screen. b) As there are multiple v ...

javascripthtmlcssgrails

What is the simplest method to check for the presence of a value within an object when utilizing lodash or angularjs?

I'm encountering an issue where this code works perfectly if "obj" is a collection, but falls short when trying to determine if a value exists within a single object. What would be the most efficient approach, utilizing either lodash or AngularJS, to ...

javascriptangularjsfindbooleanlodash

Executing multiple functions with onPress in React Native

When I press onPress using TouchableOpacity, I am attempting to invoke multiple functions. Here's an example: functionOne(){ // perform an action } functionTwo(){ // execute something } <TouchableHighlight onPress{() => this.functionOne()}/& ...

javascriptreactjsreact-native

What is the best way to incorporate plugins designed for various jQuery versions onto a single webpage?

I have integrated three jQuery scripts into an HTML page, including a Colorbox plugin for the gallery, a popup plugin for a reservation form, and a sliding jQuery script for the footer. However, I am facing issues where either the close button on the pop ...

javascriptjquery

Is there a seamless way to effortlessly upload massive files to s3 through an adminjs dashboard without encountering any glitches?

Attempting to upload large files (40mbs+) to s3 using the @adminjs\upload feature on the adminJS dashboard. While testing locally, most files are successfully uploaded but it takes a considerable amount of time. However, when attempting this on the AW ...

javascriptnode.jsamazon-s3adminjs

Is it possible to vertically center a child div within its parent container using JavaScript when the page loads without explicitly setting its position?

Using JavaScript to vertically center a child div within a fluid container involves calculating the height of both elements and positioning the child div accordingly. However, one issue faced is that the position is not set when the page loads. To solve ...

javascriptjquery

Having trouble importing a modified package forked for use in a Next.JS project

I've implemented react-headroom in my current project and had to modify its code so that the <header> wouldn't change height on different pages. To achieve this, I forked the original repository from here, made the necessary changes on my v ...

javascriptnode.jsreactjsnext.jsyarnpkg

Having issues with the functionality of the jQuery HTML function

I'm working on this jQuery code snippet: $('#wrapper').html('<img src="/loading.gif">'); var formdata = $("#validateuserform").serialize(); $.post("/userformdata.php",formdata,function(html){ if(html) ...

javascriptjqueryhtml

Problem with React Router: Uncaught Error - Invariant Violation: The element type is not valid, a string is expected for built-in components

I am encountering an issue with react-router and unable to render my app due to this error. Here is a screenshot of the error I have searched extensively for a solution but have not been able to find anything useful. Any help would be greatly appreciated ...

javascriptreactjsecmascript-6webpackreact-router

Function in Typescript used for checking types and catching compilation errors from external sources

Fact: I am currently using TS version 2.3.4. I have developed a function that checks if a variable is defined (it takes the parameter variable and returns 'undefined' !== typeof variable). It's quite simple. export function IsDefined(variab ...

javascripttypescripttypescript-typingstypescript2.0

Using jQuery to import an external script into a React JS project

I'm looking to integrate an external JavaScript file (using jQuery) into a ReactJS project. While I found some guidance on this page, I am still encountering errors. The external JS file is named external.js: $(document).ready(function() { docu ...

javascriptjqueryreactjscordova

Looking to obtain the coordinates of a draggable element?

After dragging a div around the page and submitting a form, I would like to capture its location on the page so it can render in that same spot when the page reloads. My current question is how can I capture the coordinates or location of the div after it ...

javascriptjquery

I encountered an error in JavaScript where the function .val() is not recognized on the selected answer, throwing

I'm trying to verify if the selected answer is correct and then add +1 to my user score. However, I'm struggling with why my code isn't functioning as expected. Can someone please point out where the bug is or if there's something else ...

javascriptjqueryhtmlarraysobject

The icon displays correctly in Firefox but is not visible in IE

link REL="SHORTCUT ICON" HREF="/images/greenTheme/favicon.ico" type="image/x-icon" While this code functions properly in Firefox, it appears to be causing issues in Internet Explorer. Can anyone provide guidance on how to resolve the compatibility issue w ...

javascripthtmlcss

The ScrollToTop feature in MUI component seems to be malfunctioning when paired with the useScrollTrigger hook

I am in the process of developing a custom ScrollToTop component using MUI's useScrollTrigger hook. More information can be found at this link Feel free to check out the sample code here: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9 ...

javascripthtmlcssreactjsmaterial-ui