Skip to content

Instantly share code, notes, and snippets.

@casio

casio/ngswipe-example.html

Last active December 11, 2016 08:34
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save casio/5330004 to your computer and use it in GitHub Desktop.
Save casio/5330004 to your computer and use it in GitHub Desktop.
Download ZIP
ngSwipe example
Raw
ngswipe-example.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="utf-8">
<title>ngSwipe example</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
div { margin:30px; padding:30px; background:silver;}
div:nth-child(2n) {background-color: blue; }
</style>
</head>
<body ng-controller="AppController">
<div ng-show="!showActions" ng-swipe-left="showActions = true">
<p>Some list content, like an email in the inbox</p>
</div>
<div ng-show="showActions" ng-swipe-right="showActions = false">
<button ng-click="handleClick()">Reply</button>
<button ng-click="handleClick()">Delete</button>
</div>
<script type="text/javascript" src="build/angular.js"></script>
<script type="text/javascript" src="build/angular-mobile.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngMobile']);
var AppController = function($scope) {
$scope.showActions= false;
$scope.handleClick = function() {
alert('CLICK')
};
};
</script>
</body>
</html>
@prichter
Copy link

Useful gist, thanks for taking the time to publish it. angular-mobile looks like it should be updated to angular-touch, then the demo works. Also, perhaps you might consider using the following CDN links, so this Gist can be copy & pasted to use.

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-touch.min.js"></script>

Also change module parameter:

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

Thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment