AngularJS中的ng-touchstart和ng-touchend是什么？

Question

AngularJS中的ng-touchstart和ng-touchend是什么？

javascriptangularjsmousedownmouseuptouchstart

16

我有一个元素会在 ng-mousedown 和 ng-mouseup 事件上触发函数。但是，在触摸屏上无法正常工作，是否存在类似于 ng-touchstart 和 ng-touchend 的指令？

- ciembor

3个回答

8

我今天早些时候制作了这些，因为我自己需要：

ngTouch（以下是一系列组件）
ngTouchmove
ngTouchstart
ngTouchend

希望它有所帮助。

- Mark Topper

我想使用ngTouchstart，但不幸的是它使用eval()，这将在Chrome应用程序中出现问题。 - Kevin MacDonald

1

谢谢！它能根据指令决定向左或向右移动吗？ - MartianMartian

@Matian2040，我会使用ngTouchstart和ngTouchmove（或与ngTouch一起）库。然后保存touchstart事件的坐标，然后在touchmove上检查坐标是否与新事件匹配。 - Mark Topper

@MarkTopper 在对象中哪里存储了触摸坐标？ - flexxxit

2

我们设计的版本使用$parse()，这是$eval()内部使用的方法。我们特别想使用单个指令处理mousedown和touchstart事件，但要按照Angular的方式，以便我们可以包含Angular样式表达式。

就像这样：

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});
            });
        });
    };
}]);

这是Angular的ngClick指令的简化版本。

- Kevin MacDonald

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kostya Shkryob · Accepted Answer

有一个针对此功能的模块：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>