custom popup click event in angular leaflet directive does not work as expected on iOS devices

For the development of a map on iOS devices, I am utilizing the angular leaflet directive and ionic. I am facing an issue where the popup is not clickable on the iOS simulator, even though it works fine on web browsers.

var html11 =
            '<div style="width:660px;" ng-click="goToDetail(clickedMarkerInfo)">'
            + '<div class="tripguide-tootip-row-left" ng-click="goToDetail(clickedMarkerInfo)">'
            + '<div class="tripguide-tootip-image">'
            + '<img ng-src={{clickedMarkerInfo.picture}}>'
            + '</div>'
            + '<div class="tripguide-tootip-rating" ng-show="whetherToShow(clickedMarkerInfo.rating)">'
            + '<img ng-repeat="pic in clickedMarkerInfo.ratingPics track by $index"src="{{pic}}" />'
            + '</div>'
            + '</div>'
            + '<div class="tripguide-tootip-row-right" ng-click="goToDetail(clickedMarkerInfo)">'
            + '<div class="tripguide-tootip-legend">'
            + '<span>{{clickedMarkerInfo.name}}</span>'
            + '</div>'
            + '<div class="tripguide-tootip-address">'
            + '<span>{{clickedMarkerInfo.address}}</span>'
            + '</div>'
            + '</div>'
            + '<div class="tripguide-tooltip-arrow">'
            + '<img src="images/tripguide/tooltip-arrow.png">'
            + '</div>'
            + '</div>';
 var marker = {
                lat: myLatlng[0],
                lng: myLatlng[1],
                getMessageScope: function () {
                    return $scope;
                },
                message: html11,
                compileMessage: true
            };

 $scope.markersArray.push(marker);

My iOS version is 9.3. Could this issue be related to ionic and iOS compatibility? Your advice on this matter would be greatly appreciated.

javascriptangularjsionic-frameworkleafletangular-leaflet-directive

Answer №1

checkIfElementTapIsDisabled= function(elementToCheck) {
                if (elementToCheck && elementToCheck.nodeType === 1) {
                  var currentElement = elementToCheck;
                  while (currentElement) {
                      if (currentElement.getAttribute && currentElement.getAttribute('data-tap-disabled') == 'true') {
                      return true;
                    }
                    currentElement = currentElement.parentElement;
                  }
                }
                return false;
              };

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

What is the best way to continue invoking $broadcast when the mouse is pressed on a button in AngularJS?

I have a button on my page that looks like this: <button id="scale-up" ng-click="scaleUp()">Scale Up</button> Currently, the function "scaleUp()" is defined as follows: $scope.scaleUp = () => { $scope.$broadcast('scaleUp'); }; ...

angularjsclickfrontendmousebroadcast

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

Recently, I encountered an issue with dynamically loading a form via AJAX and attempting to bind the beforeSubmit event. Strangely, the event didn't seem to work as expected, causing the form to submit and the browser to navigate to a new page. This b ...

javascriptjqueryajaxyii2

Exploring Python code to access the value of a JavaScript variable

As a newcomer to Python programming, I appreciate your patience. I have an HTML file containing multiple div layers. When clicked on, each div layer stores a value in a global JavaScript variable. This file is accessed within a webkit.WebView object. My ...

javascriptpythonwebkit

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

How can you resize a circle in Three.js without resizing its outline?

I'm currently using a THREE.Path to generate a Circular path and then utilizing a TubeGeometry to form a circle with transparent fill and an adjustable stroke thickness. My main query revolves around the process of scaling up the Circular path dynamic ...

javascript3dthree.js

Stopping the loop: Disabling the SetInterval function with ResponsiveVoice code in JavaScript

Currently, I am developing a queuing system and implementing voice announcements using Responsive Voice. I have used setInterval, but the issue is that the voice keeps looping without stopping. $( document ).ready(function() { setInterval(function() ...

javascriptjqueryajax

Unveiling the Power of Source-Maps: A Guide to Debugging Local NPM Dependencies Using `npm link`

Currently, I am utilizing babel-cli to compile the source code of my local NPM dependency. This is how my package.json file looks like: "main": "lib/index.js", "scripts": { "dev": "babel src --watch -d lib --source-maps inline", }, My other applicat ...

javascriptnpmbabeljssource-maps

EJS forEach method not displaying output

Trying to work with this .ejs file that's supposed to loop through an object and retrieve data from an API. However, after fetching the data, it appears that nothing is being displayed on the screen. I've checked the API results in the console l ...

javascriptnode.jsexpressejs

Issue with BackboneJS TypeError

I attempted to use the example below, but I encountered an error stating "TypeError: _.has is not a function". Example: I have experimented with different versions of jQuery and Backbone (uncompressed), yet the same error persists. Can anyone offer assis ...

javascriptbackbone.jsjavascript-framework

Unable to locate node module when using Npm.require

I've been attempting to utilize the Npm.require method in order to access the ldapjs module for client authentication. Unfortunately, I'm encountering the following error message: var ldap = Npm.require('ldapjs'); Error: Cannot find ...

javascriptnode.jsmeteor

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

javascriptjqueryhtmlmenu

Is there anyone who can clarify the operations happening within this Three.js StereoEffect code?

Is there anyone knowledgeable in stereo rendering who can provide an explanation of how these functions work together to achieve the VR stereo effect? Information on functions like StereoCamera(), setScissor(), setViewPort() in the three.js library seems s ...

javascriptthree.jsvirtual-realitystereoscopy

Moving punctuation from the beginning or middle of a string to the end: A guide

My Pig Latin converter works well with single or multi-word strings, but it struggles with punctuation marks. For example, when I input translatePigLatin("Pig Latin.");, the output is 'Igpay Atin.lay' instead of 'Igpay Atinlay.'. How c ...

javascriptregex

The location of the CHROMEDRIVER for Node.js with Selenium

After trying "npm install selenium-webdriver", I am still encountering the error message below. Can anyone provide guidance on where the path is supposed to be located? Error: The ChromeDriver could not be found on the current PATH. Please download the ...

javascriptnode.jsselenium

Deploying tracking scripts within GTM containers during Turbolinks transitions

Is there a solution for getting a Google Tag Manager container to fire all its tags under Turbolinks? In my Rails 4.0 application with Turbolinks, I have included the following code in a footer that is rendered on every page within the <head> tags: ...

javascriptruby-on-rails-4tagsgoogle-tag-managerturbolinks

What are the solutions for fixing a JSONdecode issue in Django when using AJAX?

I am encountering a JSONDecodeError when attempting to send a POST request from AJAX to Django's views.py. The POST request sends an array of JSON data which will be used to create a model. I would greatly appreciate any helpful hints. Error: Except ...

javascriptdjangoajaxhttp-post

Need to know how to invoke a function from an http callback function that resides in a separate file? Simply use the `app.get("/", callbackFun)` method

Directory Organization: testAPI contactDetail dispMobNo.js myModule.js index.js index.js const express = require("express"); const app = express(); const port = process.env.port || 3000; const getCustNo = require("./cont ...

javascriptnode.jsexpresscallback

Prevent submission of form by disabling button until modifications are made to the original data in Vue.js

For experimental purposes, I have created a simple form and am trying to implement a feature where the button remains disabled until the original form data is changed. Additionally, I want to ensure that the button stays disabled even if the changed data i ...

javascriptvue.jsvuejs2

Exploring AngularJS: Leveraging ng-model within a custom directive featuring iterations and dynamically generated HTML elements

Trying to implement a directive for a grid, I encountered an issue where passing in a column definition that includes an HTML control with ng-model and ng-click directives resulted in an error: "Error: [$rootScope:infdig] 10 $digest() iterations reached. ...

javascriptangularjs

Issue: The type 'void' cannot be assigned to the type 'ReactNode' in the array.map() function

Having trouble with my function call error within the practice setup in App.tsx. My expectation of array.map() being compatible with TypeScript seems to be incorrect. The generated HTMLElement from this map is not displaying on screen. Any suggestions on ...

javascriptreactjstypescriptvisual-studio-codenext.js