cancel-ng-swipe-right-on-child

<!DOCTYPE html>

<html lang="en" ng-app="myapp">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<!-- add styles -->

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- add javascripts -->

<!-- <script src="js/jquery-2.1.3.min.js"></script> 不需要 -->

<script src="js/angular.min.js"></script>

<!-- <script src="js/angular-animate.min.js"></script> 不需要 -->

<script src="js/angular-touch.min.js"></script>

<script src="js/app.js"></script>

<title>一个页面存在多个swipe时,互不影响cancel-ng-swipe-right-on-child</title>

</head>

<body ng-controller="MyCtrl">

    <div id="page" ng-cloak ng-swipe-left="showMenu = true">

        <h1>Angular Swipe Menu</h1>

        <div class="menu-grip box" ng-show="!showMenu" ng-click="showMenu = true">

            .<br />.<br />.

        </div>

        <nav class="menu box" ng-show="showMenu" ng-swipe-right="showMenu = false">

            <ul>

                <li class="menu_item" ng-repeat='nav in navigation'>

                    <a class="menu_link" ng-href="{{nav.href}}" ng-bind="nav.title"></a>

                </li>

            </ul>

        </nav>

        <div class="big-swiper box" ng-swipe-right="next();stopActions($event);" ng-swipe-left="prev();stopActions($event);" ng-bind="index"></div>

    </div>

</body>

</html>

<!-- http://jsfiddle.net/scottux/RLDsU/ -->

*{margin:; padding:; border: none;}

html, body, #page{height: 100%; min-height: 100%;}

.box{background-color: #EFEFEF; box-shadow: 0 1px 2px #dedede; border: 1px solid #ddd; border-radius: 4px;}

.menu{float: right; min-height:100%; width: 98%;}

.menu_item{line-height:;}

.menu_link{display:block; padding-left:1em;}

.menu_link:hover{background: #DEDEDE;}

.menu-grip{float:right; height:5em; line-height:.5; padding-top:2em; text-align:center; width:1em;}

h1{background:black; color:white; font-size:1.1em; line-height:1.3;}

.big-swiper{font-size: 5em; height:3em; line-height:; margin:.5em auto; text-align:center; width:4em;}

.big-swiper:before{content:'<\a0'; color:#dedede; font-weight:;}

.big-swiper:after{content:'\a0>'; color:#dedede; font-weight:;}

var app = angular.module('myapp', ['ngTouch']);

app.controller('MyCtrl', function MyCtrl($scope) {

    $scope.stopActions = function (event) {

        if (event.stopPropagation) {

            event.stopPropagation();

        }

        // if (event.preventDefault) {

        //     event.preventDefault();

        // }

        // event.cancelBubble = true;

        // event.returnValue = false;

    };

    // Carousel thing

    $scope.index = 0;

    // Hide menu

    $scope.showMenu = false;

    // Links

    $scope.navigation = [{

        title: "Page A",

        href: "#pageA"

    }, {

        title: "Page B",

        href: "#pageB"

    }, {

        title: "Page C",

        href: "#pageC"

    }];

    // Increment carousel thing

    $scope.next = function () {

        //stopActions($event);

        $scope.index++;

    };

    // Decrement carousel thing

    $scope.prev = function () {

        //stopActions($event);

        $scope.index--;

    };

});