Interfaz de usuario angular móvil: eventos táctiles

Para trabajar con Touch y sus eventos, debe agregar el siguiente módulo:

mobile-angular-ui.gestures

Si solo está interesado en el módulo táctil, puede agregar solo mobile-angular-ui.gestures.touch .

$ touch es un servicio disponible con módulo táctil. Funcionará en cualquier dispositivo de entrada con el que desee trabajar. Da detalles como movimiento, duración, velocidad, dirección, etc.

Métodos en $ touch

Los siguientes son los métodos disponibles en $ touch:

enlazar

Echemos un vistazo al método de vinculación .

Syntax

$touch.bind(element, eventHandlers, [options])

Parameters

element - elemento html que desea tratar con detalles táctiles.

eventHandlers- Un objeto con controladores para eventos táctiles específicos. Los eventHandlers disponibles son:

  • start - es una devolución de llamada para el evento touchstart.

  • end - es un evento de devolución de llamada para tocar.

  • move - es una devolución de llamada para el evento touchmove.

  • cancel - es una devolución de llamada para el evento touchcancel.

options - Es un objeto que puede tener los siguientes detalles -

  • movementThreshold- Un valor entero. El número de píxeles de movimiento antes de comenzar a activar los controladores touchmove.

  • valid - Es una función que devuelve un valor booleano que decide si un toque debe manejarse o ignorarse.

  • sensitiveArea- Puede ser una función, un elemento o BoundingClientRect. El área sensible define los límites para liberar el tacto cuando el movimiento está afuera.

  • pointerTypes - Es una matriz de punteros que tiene claves que son un subconjunto del mapa de eventos de puntero predeterminado.

Tipos disponibles en $ touch

Los siguientes son los tipos disponibles en $ touch:

Propiedad Tipo Descripción
tipo cuerda Esto le dirá el tipo de evento. Por ejemplo: touchmove, touchstart, touchend, touchcancel
marca de tiempo Fecha La marca de tiempo cuando ocurrió el toque
duración En t Diferencia entre el evento táctil actual y el inicio táctil
startX flotador Coordenada X de touchstart
startY flotador Coordenada Y de touchstart
prevX flotador Coordenada X del touchstart o touchmove ocurrido anteriormente
ANTERIOR flotador Coordenada Y del touchstart o touchmove ocurrido anteriormente
X flotador Coordenada X del evento táctil
y flotador Coordenada Y del evento táctil
paso flotador La distancia entre los puntos prevX, prevY y x, y
pasoX flotador La distancia entre los puntos prevX y x
stepY flotador La distancia entre los puntos anterior y y
velocidad flotador Velocidad en píxeles de un evento táctil por segundo
velocidad media flotador Velocidad promedio del evento de inicio táctil por segundo
distancia flotador La distancia entre los puntos startX, startY y x, y
distanciaX flotador La distancia entre los puntos startX y x
distanciaY flotador La distancia entre los puntos startY y y
total flotador El movimiento total, es decir, el movimiento horizontal y vertical realizado a través del dispositivo.
totalX flotador El movimiento total, es decir, la dirección horizontal, también incluye cambios de dirección y cambios de dirección.
totalY flotador El movimiento total, es decir, la dirección vertical, también incluye cambios de dirección y cambios de dirección.
dirección flotador La ubicación del tacto en la dirección izquierda, superior, inferior y derecha
ángulo flotador El ángulo en grados desde el eje xey

Aquí hay un ejemplo práctico que muestra los tipos de toque.

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>

Ahi esta touchtest directiva agregada en app.js que hace uso del método $ 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();
            }
         });
      }
   };
}]);

El código completo dentro de app.js es el siguiente:

/* 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 directiva touchtest se usa dentro del html como se muestra a continuación:

<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>

Ahora probemos la pantalla en el navegador. La pantalla resultante es la siguiente: