9.移动端手势初探.md

手势

之前我们只实现了 touchstart touchmove touchend 当这3个指令联合使用的时候就构成了一个手势,但是一次绑定3个指令太麻烦能否集成为一个指令是这一节的内容。

定义手势

angular.module('app', [])
.directive('ngGesture', function () {

    return function ($scope, $element, $attribute) {

        $element.bind('touchstart', function (event) {

            $scope.$event = event;

            var method = $attribute['ngGesture'];

            $scope.$apply(method)

        })

        $element.bind('touchmove', function (event) {

            $scope.$event = event;

            var method = $attribute['ngGesture'];

            $scope.$apply(method)

        })

        $element.bind('touchend', function (event) {

            $scope.$event = event;

            var method = $attribute['ngGesture'];

            $scope.$apply(method)

        })

    }

})

使用

<div ng-gesture="gesture($event)">手势视图<div>

int main(){
    int a = 10, b = 20;
    int sum( int a , int b){
        return a+b;
    }
    return sum( a, b );
}

angular.module('app', [])
.controller('main', ['$scope', function ($scope) {

            $scope.gesture = function (event) {

                switch (event.type) {

                    case 'touchstart':
                    //在这里书写 touchstart 要做的事
                        break;

                    case 'touchmove':
                    //在这里书写 touchmove 要做的事
                        break;

                    case 'touchend':
                    //在这里书写 touchend 要做的事
                        break;

                }

            }

        }])