My "ngTouch" Demo

Checking out Angular's "ngTouch".

by manoj

HTML

<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://code.angularjs.org/1.2.7/angular-touch.js"></script>
<div ng-controller="MyCtrl">
    <div>
        <div><pre> Left swipes: {{model.left}}</pre></div>
        <div><pre>Right swipes: {{model.right}}</pre></div>
        <div><pre>Touch clicks: {{model.click}}</pre></div>
    </div>
    <div class="swipy"
         ng-swipe-left="swipeLeft()"
         ng-swipe-right="swipeRight()"
         ng-click="touchClick()">
        Swipe me !
    </div>
</div>

CSS

div {
    font-size: 0.9em;
}

div.swipy {
    text-align: center;
    padding: 15px;
    margin: 5px;
    border-radius: 2px;
    border: 3px groove gray;
    background-color: light-gray;
}

JavaScript

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

app.controller('MyCtrl', function ($scope) {
    $scope.model = {
        left:  0,
        right: 0,
        click: 0
    };
    $scope.swipeLeft = function () {
        $scope.model.left += 1;
    };
    $scope.swipeRight = function () {
        $scope.model.right += 1;
    };
    $scope.touchClick = function () {
        $scope.model.click += 1;
    };
});