CODEWITHSUNDEEP
angularjstouchmoveangularjs-ng-touch
Ahmed Karmous
Ahmed Karmous

Reputation: 373

AngularJS touchmove on multiple items

I have a list of items and when I move my finger over each then I want to get the id for example of each item. It works with a mouse but not with touch. I'm using this lib: https://github.com/nglar/ngTouch

HTML:

<p class="text-center" > item : {{current}}</p>
<p class="text-center" > state : {{state}}</p>
<div class="row" ng-repeat="item in items" >
    <div ng-style="{background: color}" 
            style="width:100px;height:100px;margin-top:10px;margin-left:auto;margin-right:auto" 
            ng-touchstart="onTouchstart(item)" 
            ng-touchmove="onTouchmove(item)" 
            ng-touchend="onTouchend(item)">
        <p>{{item}}</p>
    </div>
</div>

JS:

$scope.items    = ["1" , "2" , "3"];
$scope.current  = "0";
$scope.state    = "waiting..."
$scope.color    = "red";

$scope.onTouchstart = function(item) {
   $scope.current   = item;
   $scope.state     = "Touch start"
}

$scope.onTouchmove = function(item) {
   $scope.current  = item;
   $scope.state    = "Touch move"
}

$scope.onTouchend   = function(item) {
   $scope.current   = item;
   $scope.state     = "Touch end"
}

It's working fine if I'm in the current element, it detects the 3 movements. But for example when I touch item 1 and move my finger to item 2 it doesn't detect it, it's still on item 1.

Upvotes: 0

Views: 1516

Answers (1)

Matt Searles
Matt Searles

Reputation: 2765

You'll need to get the scope of the element you've touchover'ed based on other criteria, such as position, eg.

e.preventDefault();
var touch = e.originalEvent.changedTouches[0] || e.originalEvent.touches[0] || e.touches[0] || e.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY;
var element = document.elementFromPoint(x, y);
var scope = angular.element(element).scope();

Upvotes: 0

Related Questions