Angularjs中的ng-touchstart和ng-touchend

Question

Angularjs中的ng-touchstart和ng-touchend

cie*_*bor 16 javascript mouseup mousedown touchstart angularjs

我有上触发功能的元件ng-mousedown和ng-mouseup.但是,它在触摸屏上不起作用,是否有任何指令ng-touchstart和ng-touchend？

Answer 1

有一个模块:https://docs.angularjs.org/api/ngTouch

但是你也可以为事件编写自己的指令:

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

Run Code Online (Sandbox Code Playgroud)

Angular的ngTouch库不支持绑定到单个触摸和释放事件:http://stackoverflow.com/questions/19985097/can-angulars-ngtouch-library-be-used-to-detect-a-long-click-touch-保持 - 释放 (3认同)

Answer 2

Mar*_*per 8

因为我自己需要,所以我今天做得更早了:

希望能帮助到你.

归档时间：	11 年前
查看次数：	34447 次
最近记录：	8 年，11 月前