Angular-Touch库用法示例  更新时间:2016年12月22日 14:31:54   作者:wheatmark   这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下 本文实例讲述了Angular-Touch库用法。分享给大家供大家参考,具体如下: Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。 先在页面上弄个div 引入两个库 注册事件 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(delta300 && !locked){ console.log(‘trun left’); } }, ‘end’:function(coords){ }, ‘cancel’:function(coords){ } }); } } } ]); }catch(e){ console.error(e); } 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: AngularJS辅助库browserTrigger用法示例 Angular2中Bootstrap界面库ng-bootstrap详解 AngularJS实现分页显示数据库信息 在JavaScript的AngularJS库中进行单元测试的方法 使用JavaScript的AngularJS库编写hello world的方法 利用JavaScript的AngularJS库制作电子名片的方法 使用AngularJS 应用访问 Android 手机的图片库 Angular 库 相关文章 AngularJS 基础ng-class-even指令用法 本文主要介绍AngularJS ng-class-even 指令,这里整理了ng-class-even基础知识资料,并附实例代码和效果图,学习AngularJS指令的朋友可以看下 2016-08-08 Angular2仿照微信UI实现9张图片上传和预览的示例代码 本篇文章主要介绍了Angular2仿照微信UI实现9张图片上传和预览的示例代码,非常具有实用价值,需要的朋友可以参考下 2017-10-10 Angularjs在360兼容模式下取数据缓存问题的解决办法 这篇文章主要为大家详细介绍了Angularjs在360兼容模式下取数据缓存问题的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 angularJS自定义directive之带参方法传递详解 今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular.js中上传指令ng-upload的基本使用教程 这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。 2017-07-07 angularjs手动识别字符串中的换行符方法 今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 浅谈angularjs module返回对象的坑(推荐) 下面小编就为大家带来一篇浅谈angularjs module返回对象的坑(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-10-10 强大的 Angular 表单验证功能详细介绍 本篇文章主要介绍了强大的 Angular 表单验证功能详细介绍,使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求,有兴趣的可以了解一下 2017-05-05 AngularJS select加载数据选中默认值的方法 下面小编就为大家分享一篇AngularJS select加载数据选中默认值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 Angular的Bootstrap(引导)和Compiler(编译)机制 这篇文章主要介绍了Angular的Bootstrap(引导)和Compiler(编译)机制的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-06-06 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJS辅助库browserTrigger用法示例
  • Angular2中Bootstrap界面库ng-bootstrap详解
  • AngularJS实现分页显示数据库信息
  • 在JavaScript的AngularJS库中进行单元测试的方法
  • 使用JavaScript的AngularJS库编写hello world的方法
  • 利用JavaScript的AngularJS库制作电子名片的方法
  • 使用AngularJS 应用访问 Android 手机的图片库
张贴在3