angularjsipadtouchangularjs-ng-clickangularjs-ng-touch

Angular ng-click function not called on touchscreen devices


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.


Solution

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