Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ng-touch #8

Open
Wscats opened this issue Aug 11, 2016 · 1 comment
Open

ng-touch #8

Wscats opened this issue Aug 11, 2016 · 1 comment

Comments

@Wscats
Copy link
Owner

Wscats commented Aug 11, 2016 •
edited
Loading

引入文件
anguar的单页面页面引入两个脚本，一个angular的框架，一个是触摸的库
<script type="text/javascript" src="dist/js/angular.js"></script>
<script type="text/javascript" src="dist/js/angular-touch.js"></script>

记得在这里引入ngTouch模块
var app = angular.module('wsscat', ['ngRoute','ngTouch']);

编写路由

.when('/touch', {
        controller: 'touchCtrl',
        templateUrl: 'view/touch.html'
})

还要在controller里面把注入$swipe服务，如果我们打印$swipe服务会发现里面只暴露了一个方法bind
这里写图片描述

touchCtrl控制器
执行$swipe服务的bind方法，bind方法可以传入三个参数
function(element, eventHandlers, pointerTypes)
第一个是获取的节点，可以是directive link方法中获取的element，也可以是原生JS选择器获取的节点，然后放进angular.element函数里面，第二参数是需要监听的触摸动作，总共四个start，move，end和cancel，可以在他们对应的函数中获取对应滑动所在的坐标点

app.controller('touchCtrl', ['$scope', '$swipe', function($scope, $swipe) {
            console.log($swipe);
            var ele = angular.element(document.getElementById('trapezoid'));
            console.log(ele);
            $swipe.bind(ele, {
                'start': function(coords) {
                    startX = coords.x;
                    startY = coords.y;
                    console.log(coords);
                },
                'move': function(coords) {
                    //console.log(coords);
                    var delta = coords.x - startX;
                    if(delta < -300 && !locked) {
                        console.log('trun right');
                    } else if(delta > 300 && !locked) {
                        console.log('trun left');
                    }
                },
                'end': function(coords) {
                    console.log(coords);
                },
                'cancel': function(coords) {
                    console.log(coords);
                }
            });
        }])

touch视图
<div id="trapezoid"></div>

在控制器中可以有两个事件监听左右滑动（上下滑动却没有）

$scope.left = function(){
                console.log('wsscat is left');
            }
            $scope.right = function(){
                console.log('wsscat is right');
            }

<p ng-swipe-left="left()" ng-swipe-right="right()">尝试左右滑动</p>
@Wscats
Copy link
Owner Author

Wscats commented Sep 8, 2016 •
edited
Loading

自定义的手势插件

app.directive('ngWs', function() {
            return {
                link: function(scope, ele, attr) {
                    var xStart, xEnd, yStart, yEnd;
                    function direction(xStart, xEnd, yStart, yEnd) {
                        console.log("xStart:" + xStart + "xEnd:" + xEnd + "yStart:" + yStart + "yEnd:" + yEnd);
                        if(Math.abs(xStart - xEnd) >= Math.abs(yStart - yEnd)) {
                            if(xStart >= xEnd) {
                                console.log("left")
                                scope.$apply(attr.ngWs)
                            } else {
                                scope.$apply(attr.ngWs)
                                //scope.$apply(scope.touch())
                            }
                        } else {
                            if(yStart >= yEnd) {
                                console.log("up")
                                scope.$apply(scope.touch())
                            } else {
                                console.log("down")
                                scope.$apply(scope.touch())
                            }
                        }
                    }
                    ele.bind('touchstart', function(e) {
                        xStart = e.targetTouches[0].pageX;
                        yStart = e.targetTouches[0].pageY;
                    })
                    ele.bind('touchend', function(e) {
                        xEnd = e.changedTouches[0].pageX;
                        yEnd = e.changedTouches[0].pageY;
                        direction(xStart, xEnd, yStart, yEnd)
                    })

                }
            }
        })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Wscats