ngSwipe not working properly

Question

I'm creating a touch screen application for my client using AngularJs. I'm using ngTouch and then the directives ng-swipe-left and ng-swipe-right. I've created a function that should be called when I swipe left and similarly for swipe right.

HTML Template:

<div class="prod-gall" data-ng-controller="getItemDataCtrl>
    <ul class="prod-gall-list" data-ng-swipe-left="swipeLeft($event)">
        <li data-ng-repeat="i in itemList" >
            <figure class="prd-img"> @*<img src={{i.image}} alt="" />*@ <img class="figure.prd-img img" src=content/images/movies/m2210521.jpg alt="" />
                <figcaption class="prd-nam f5">{{i.title}}</figcaption>
            </figure>
            <div class="prd-price f5"> {{i.currentprice}} </div>
        </li>
    </ul>
</div>

I'm seeing the below to problems.

1. When I swipe in left I could see my function being called but not always, it is working intermittently, I'm unable to find the exact location when it is actually calling the function (however I don't want it to work only for specific location) because it is not that it is working always when I swipe on the same area, it keep on changing.

2. You see that I'm using the ul - > li ->figure and figcaption - when I try to swipe by touching the li which is container of the figure and figcaption I could see that figcaption i.e., text is being highlighted or selected and if I touch sipw on the image the image clone is being selected instead of swipe. (this may not be related to ngTouch, but not sure)

How can I fix these two issues. Please help.

Answer 1

I was just calling the wrong function, i.e., when I swipe left I was calling the function that I've created for swipe right and vice versa.