Angular ng-click function not called on touchscreen devices

Question

I have a directive which contains an iScroll element, which is built with li from an ng-repeat:

<div class="my-film">
    <div class="filmstrip-container">
        <div class="scroll-wrapper">

            <ul class="film-container">

                    <li ng-repeat="film in films" 
                        ng-mouseover="onMouseOverItem($event)" 
                        ng-mouseleave="onMouseLeaveItem($event)"
                        ng-click="openFilm()"
                        class='film-slide'>

                     ...nested videos etc in here.

                    </li>

            </ul>

        </div>
    </div>
</div>

In the directive's link function I have the onClick function like this

scope.openFilm = function() {
    ...code to open the film and play
}

This is working totally as expected on desktop, but when on Touchscreen (testing on an iPad) the openFilm() function is never called, however, the element does get the ng-click-active class applied.

I do have other event listeners on the li elements, but removing these didn't make any difference. Could it be something to do with iScroll?

We're using Angular 1.3, and have ngTouch added.

score 3 · Answer 1 · answered Dec 11 '14 at 13:35

3

Try installing <script src="angular-touch.js"> provide dependency while initializing your app angular.module('app', ['ngTouch']); Hope this will help you. pleasae refer this page link

answered Dec 11 '14 at 13:35

Sudarshan Kalebere

3,813
3
34
64

Please check ur css then it must be blocking the links. Usually this happens if u are using responsive css. It happens with bootstrap too. – Sudarshan Kalebere Dec 11 '14 at 19:23
It might be worth testing your software with Firefox. I have seen AngularJS web pages with buttons that work or don't work depending on the browser, with the following results. Firefox ☑, Dolphin ☒, Chrome ☒, Opera ☒, "Internet" ☒. Where "Internet" was the default browser delivered on a Samsung Android tablet. The results were from a Samsung Galaxy tablet model GT-P3110 running Android 4.1.1. It seemed to be the browser which was the deciding factor as colleges did a few similar tests on iPhones and Sony smart phones. For clarification, work means respond to a tap on a touch sensitive screen. – Ivan Feb 08 '16 at 14:24

score 2 · Accepted Answer · answered Dec 11 '14 at 14:12

2

The problem here was the iScroll blocking my touch events. Passing {click: true} in as the options when initiating the iScroll fixed the problem.

answered Dec 11 '14 at 14:12

Jack Wild

2,072
6
27
39

score 2 · Answer 3 · answered Feb 26 '15 at 17:58

2

iOS creates separate events for ng-mouseover, ng-click, ng-mouseleave, etc. That means that your first tap will trigger ng-mouseover, your second tap will trigger ng-click, and your tap outside the element will trigger ng-mouseleave.

Saddly, I thought ngTouch would fix this issue created by iOS but it didn't. It fixed it only if you use css hover, but not if you use java script mouse events (including those of angular).

answered Feb 26 '15 at 17:58

ElijahQM

31
1

This is not an answer, it should be a comment. – dudewad Jul 21 '15 at 22:35

Angular ng-click function not called on touchscreen devices

3 Answers3