Interface utilisateur angulaire mobile - Événements tactiles
Pour travailler avec Touch et ses événements, vous devez ajouter le module suivant -
mobile-angular-ui.gestures
Si vous êtes simplement intéressé par le module tactile, vous ne pouvez ajouter que mobile-angular-ui.gestures.touch .
$ touch est un service disponible avec module tactile. Il fonctionnera sur tous les périphériques d'entrée avec lesquels vous souhaitez travailler. Il donne des détails comme le mouvement, la durée, la vitesse, la direction, etc.
Méthodes dans $ touch
Voici les méthodes disponibles dans $ touch -
lier
Jetons un œil à la méthode bind .
Syntax
$touch.bind(element, eventHandlers, [options])
Parameters
element - élément html que vous souhaitez traiter avec les détails tactiles.
eventHandlers- Un objet avec des gestionnaires pour des événements tactiles spécifiques. Les eventHandlers disponibles sont -
start - c'est un rappel pour l'événement touchstart.
end - c'est un événement de rappel pour touchend.
move - c'est un rappel pour l'événement touchmove.
cancel - c'est un rappel pour l'événement touchcancel.
options - C'est un objet qui peut avoir des détails comme suit -
movementThreshold- Une valeur entière. Le nombre de pixels de mouvement avant de commencer à déclencher les gestionnaires touchmove.
valid - C'est une fonction qui renvoie une valeur booléenne qui décide si une touche doit être gérée ou ignorée.
sensitiveArea- Cela peut être une fonction, un élément ou BoundingClientRect. La zone sensible définit les limites pour libérer le toucher lorsque le mouvement est à l'extérieur.
pointerTypes - C'est un tableau de pointeurs qui a des clés qui sont un sous-ensemble de la carte d'événements de pointeur par défaut.
Types disponibles dans $ touch
Voici les types disponibles dans $ touch -
Propriété | Type | La description |
---|---|---|
type | chaîne | Cela vous indiquera le type d'événement. Par exemple - touchmove, touchstart, touchend, touchcancel |
horodatage | Date | L'horodatage du contact |
durée | int | Différence entre l'événement tactile actuel et le démarrage tactile |
startX | flotte | Coordonnée X du touchstart |
startY | flotte | Coordonnée Y du touchstart |
prevX | flotte | Coordonnée X du touchstart ou touchmove qui s'est produit précédemment |
précédent | flotte | Coordonnée Y du touchstart ou touchmove qui s'est produit précédemment |
X | flotte | Coordonnée X de l'événement tactile |
y | flotte | Coordonnée Y de l'événement tactile |
étape | flotte | La distance entre les points prevX, prevY et x, y |
stepX | flotte | La distance entre les points prevX et x |
stepY | flotte | La distance entre les points précédent et y |
rapidité | flotte | Vitesse en pixels d'un événement tactile par seconde |
vitesse moyenne | flotte | Vitesse moyenne de l'événement touchstart par seconde |
distance | flotte | La distance entre les points startX, startY et x, y |
distanceX | flotte | La distance entre les points startX et x |
distanceY | flotte | La distance entre les points startY et y |
total | flotte | Le mouvement total, c'est-à-dire le mouvement horizontal et vertical effectué à travers l'appareil |
totalX | flotte | Le mouvement total, c'est-à-dire la direction horizontale, comprend également les retournements et les changements de direction |
totalY | flotte | Le mouvement total, c'est-à-dire la direction verticale, comprend également les retournements et les changements de direction |
direction | flotte | L'emplacement de direction gauche, haut, bas, droite du toucher |
angle | flotte | L'angle en degrés par rapport aux axes x et y |
Voici un exemple fonctionnel montrant les types de touches.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mobile Angular UI Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
<link rel="stylesheet" href="src/css/app.css" />
<script src="src/js/app.js"></script>
<style>
a.active {
color: blue;
}
</style>
</head>
<body ng-app="myFirstApp" ng-controller="MainController" class="listening">
<!-- Sidebars -->
<div class="sidebar sidebar-left ">
<div class="scrollable">
<h1 class="scrollable-header app-name">Tutorials</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="/">Home Page </a>
<a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a>
<a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a>
<a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
<a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
<a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
<a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">eBooks</h1>
<div class="scrollable-content">
<div class="list-group" ui-toggle="uiSidebarRight">
<a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
</div>
</div>
</div>
</div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
<i class="fa fa-th-large "></i> Tutorials
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>
Il y a touchtest directive ajoutée dans app.js qui utilise la méthode $ touch.bind.
directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);
Le code complet dans app.js est le suivant -
/* eslint no-alert: 0 */
'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
return {
restrict: 'C',
link: function($scope, elem) {
$scope.touch=null;
$touch.bind(elem, {
start: function(touch) {
$scope.containerRect=elem[0].getBoundingClientRect();
$scope.touch=touch;
$scope.$apply();
},
cancel: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
move: function(touch) {
$scope.touch=touch;
$scope.$apply();
},
end: function(touch) {
$scope.touch=touch;
$scope.$apply();
}
});
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});
src/home/home.html
La directive touchtest est utilisée dans le html comme indiqué ci-dessous -
<div class="section touchtest">
<h4>Touch Around on the screen to see the values changing</h4>
<div>
<p>type: {{touch.type}}</p>
<p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
<p>point: [{{touch.x}}, {{touch.y}}]</p>
<p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
<p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
<p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
<p>velocity: {{touch.velocity}} px/sec</p>
<p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
<p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
</div>
</div>
Maintenant, testons l'affichage dans le navigateur. L'écran résultant est le suivant -
![](https://assets.edu.lat/mobile_angular_ui/images/touck_event.jpg)