AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Angular-Touch库用法示例

51自学网 http://www.wanshiok.com
Angular,Touch库

本文实例讲述了Angular-Touch库用法。分享给大家供大家参考,具体如下:

Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。

先在页面上弄个div

<div id="content" align="center" ng-app="imageApp" image-controller="">    <p style="position: absolute; width: 100%; margin-top: 30px;z-index: -1;">      <img id="show"src="assets/image/logo.jpg" />    </p></div>

引入两个库

<script type="text/javascript" src="js/angular/1.4.6/angular.min.js" ></script><script type="text/javascript" src="js/angular/1.4.6/angular-touch.min.js" ></script>

注册事件

try{  angular.module('imageApp',['ngTouch'])    .directive('imageController',['$swipe',function($swipe){      return {        restrict:'EA',        link:function(scope,ele,attrs,ctrl){          var startX,startY,locked=false;          $swipe.bind(ele,{            'start':function(coords){              startX = coords.x;              startY = coords.y;            },            'move':function(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){            },            'cancel':function(coords){            }          });        }      }    }  ]);}catch(e){  console.error(e);}

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。


Angular,Touch库  
上一篇:工作中常用的js、jquery自定义扩展函数代码片段汇总  下一篇:详解nodejs 文本操作模块-fs模块(三)