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.

Answer 1

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

Answer 2

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

Answer 3

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