web-dev-qa-db-fra.com

ng-touchstart et ng-touchend à Angularjs

J'ai un élément qui déclenche des fonctions sur ng-mousedown et ng-mouseup. Cependant, cela ne fonctionne pas sur l'écran tactile, existe-t-il une directive comme ng-touchstart et ng-touchend?

javascriptangularjsmousedownmouseuptouchstart
16
ciembor

Il existe un module pour cela: https://docs.angularjs.org/api/ngTouch

Mais vous pouvez également écrire vos propres directives pour les événements:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <div  ng-controller="MainCtrl">
            <div my-touchstart="touchStart()" my-touchend="touchEnd()">
                <span data-ng-hide="touched">Touch Me ;)</span>
                <span data-ng-show="touched">M-m-m</span>
            </div>
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('MainCtrl', ['$scope', function($scope) {
                $scope.touched = false;

                $scope.touchStart = function() {
                    $scope.touched = true;
                }

                $scope.touchEnd = function() {
                    $scope.touched = false;
                }
            }]).directive('myTouchstart', [function() {
                return function(scope, element, attr) {

                    element.on('touchstart', function(event) {
                        scope.$apply(function() { 
                            scope.$eval(attr.myTouchstart); 
                        });
                    });
                };
            }]).directive('myTouchend', [function() {
                return function(scope, element, attr) {

                    element.on('touchend', function(event) {
                        scope.$apply(function() { 
                            scope.$eval(attr.myTouchend); 
                        });
                    });
                };
            }]);
        </script>
    </body>
</html>
13
Kostya Shkryob

J'ai rendu ces choses plus réalistes aujourd'hui depuis que j'en avais besoin moi-même:

J'espère que cela aide.

8
Mark Topper

La version que nous avons trouvée utilise $ parse (), qui est utilisée en interne par $ eval (). Nous voulions spécifiquement gérer les événements mousedown et touchstart à l'aide d'une seule directive, mais de la manière angular afin que nous puissions inclure angular expressions de style).

Ainsi:

angular.module("ngStudentselect", []).directive('ngStudentselect', ['$parse', '$timeout', '$rootElement',
function($parse, $timeout, $rootElement) {
    return function(scope, element, attr) {
        var clickHandler = $parse(attr.ngStudentselect);

        element.on('mousedown touchstart', function(event) {
            scope.$apply(function() {
                clickHandler(scope, {$event: event});
            });
        });
    };
}]);

Il s'agit d'une version allégée de la directive ngClick d'angular.

1
Kevin MacDonald