ngTouch event example using angularjs-ngtouch directive

ngTouch event example using angularjs-ngtouch directive

Installation

A angularjs simple add bew module to add directives for touch mobile,iphone,tablet or more devices.

"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-touch.js"
<script src="path/to/angular.js"></script>
<script src="path/to/angular-touch.js"></script>

A angularjs module to simple add directives for some touch devices.

How to use it

You must here app’s include the ngTouch directive dependency on your module add angular module:

 var app = angular.module("infinityApp", ["ngTouch"]); 
<div ng-touchmove="myfunctionname($event)" ng-touchstart="myfunctionname($event)" ng-touchend="myfunctionname($event)"></div> 

Example

index.html

<h1>ngtouch directive  angularjs example jsfiddle</h1>
<div ng-controller="liveCtrl">
    
    <div>
    <div class='btn' on-touch="livetouch(4)">Touch device or click device me</div>
        <div class='btn' on-touch="livetouch">Touch device or click device me</div>
            <div class='btn' on-touch="livetouch">Touch device or click device me</div>
    </div>
    <hr>
    <div>Display : {{comment.join(' | ')}}</div>
</div>

index.js

var app = angular.module('test', []);

app.directive('onTouch', function() {
  return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            var ontouchFn = scope.$eval(attrs.onTouch);
            elm.bind('touchstart', function(evt) {
                scope.$apply(function() {
                    ontouchFn.call(scope, evt.which);
                });
            });
            elm.bind('click', function(evt){
                    scope.$apply(function() {
                        ontouchFn.call(scope, evt.which);
                    });
            });
        }
    };
});

app.controller('liveCtrl', function($scope) {
    $scope.comment = [];
    $scope.livetouch = function(item) {
        (item) ? item = 1 : null
            for (var i =0 ; i< item ; i++) {
        $scope.comment.push("Fire");
    }
    };
});

style.css

.btn {
    display: block;
    border: 2px solid;
    height: 150px;
    width: 150px;
    float: right;
    margin: 15px;
    padding: 10px;
}

Example