July 9, 2018
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>
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; }