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程序设计有所帮助。

(0)

相关推荐

  • AngularJS辅助库browserTrigger用法示例

    本文实例讲述了AngularJS辅助库browserTrigger用法.分享给大家供大家参考,具体如下: 今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger,这是来自于ngScenario的一段代码.主要用户触发浏览器型行为更新ng中scope view model的值. 这是angularjs源码中单元测试的使用browserTrigger的实例: it('should set the model to empty string when empty optio

  • Angular2中Bootstrap界面库ng-bootstrap详解

    准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境. 使用 ng-bootstrap 下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式: npm install bootstrap@4.0.0-alpha.2 --save 接着下载 ng-bootstrap , 同样使用 npm 包的形

  • AngularJS实现分页显示数据库信息

    接着第一篇<>AngularJS内建服务$location及其功能详解>,进行学习 Section 2:实现分页显示效果 那么再隐身一下,通过location的setter方法设置当前的url信息.在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术.嵌套的控制器之间传递数据.scope的继承. http通信.内链接传递变量等. 首先建立一个首页模板 <!DOCTYPE html> <html ng-app="tu

  • 在JavaScript的AngularJS库中进行单元测试的方法

    开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心.  测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但在我的实际应用中却还是很有挑战.这里我就简单示范一下我是怎么操作的吧. Instant Karma Karma 是来Angular团队针对Java

  • 使用JavaScript的AngularJS库编写hello world的方法

    本文展示了AngularJS框架实现的hello world代码示例. 如下是一些你在看Hello World 示例和接下来的代码示例时需要重点关注的方面. ng-app, ng-controller, ng-model 指令 带有两个大括弧的模板 步骤 1: 在<Head>部分包含Angular Javascript 将下面的代码包含入 <head></head> 中,以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库

  • 利用JavaScript的AngularJS库制作电子名片的方法

    简介 在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成器. 尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的全部灵感之源. 背景 在该应用中,我们需要做些简单工作.首先,我们需要用CSS设计名片.然后,我们需要让用户实时的输入和编辑数据,这个地方AngularJS就不可或缺了.再然后,我们需要将名片的HTML div容器转化为canvas画布,并以PN

  • 使用AngularJS 应用访问 Android 手机的图片库

    Download angularjs.zip- 4.5 KB 介绍 这篇文章来说明如何使用AngularJs调用android Apps暴露的REST APIS来访问图像库. 背景 Android和IOS 有很多远程访问的app,但是开发者缺少远程访问手机特征的API.因此,myMoKit的开发是用来填补软件解决方案的缺陷的. 使用代码 使用代码是很简单的,你只要通过web URL 引用myMoKit 服务,你就可以看见所有暴露的REST API了 这些在手机里面的API列表和流媒体.通过Ang

  • Angular-Touch库用法示例

    本文实例讲述了Angular-Touch库用法.分享给大家供大家参考,具体如下: Angular-touch库用的不多,网上的例子也不多.写个触屏滑动的事件. 先在页面上弄个div <div id="content" align="center" ng-app="imageApp" image-controller=""> <p style="position: absolute; width: 1

  • Python docx库用法示例分析

    本文实例分析了Python docx库用法.分享给大家供大家参考,具体如下: 打开及保存文件: from docx import Document document = Document('test.docx') document.save('test.docx') 添加文本: document.add_paragraph('test text') 调整文本位置格式为居中: from docx import Document from docx.enum.text import WD_ALIGN

  • Python标准库中的logging用法示例详解

    目录 1.logging的介绍 2.简单用法示例 3.日志级别 4.打印格式的各个参数 5.日志输出到指定文件 6.日志回滚(按照文件大小滚动) 7.日志回滚(按照时间滚动) 1.logging的介绍 logging是Python标准库中记录常用的记录日志库,通过logging模块存储各种格式的日志,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等. 2.简单用法示例 首先创建一个logger.py的文件,其里面的代码如下所示: import logging # 1.创

  • Go编程库Sync.Pool用法示例详解

    目录 场景 用法 创建 GET & PUT 优化 Log 函数 性能测试 场景 go 如果频繁地创建.销毁对象(比如 http 服务的 json 对象,日志内容等),会对 GC 造成压力.比如下面的 Log 函数,在高并发情况下,需要频繁地创建和销毁 buffer. func Log(w io.Writer, key, val string) { b := new(bytes.Buffer) // 按一定的格式打印日志,这一段不是重点 b.WriteString(time.Now().UTC()

  • react-dnd API拖拽工具详细用法示例

    目录 前言 概念 核心API DndProvider Backend useDrag useDrag返回三个参数 useDrag传入两个参数 DragSourceMonitor对象 useDrop useDrag返回两个参数 useDrop传入一个参数 DropTargetMonitor对象 数据流转 拖拽预览 DragPreviewImage useDragLayer 其他使用场景 批量拖拽 拖拽排序 最后 前言 最近公司准备开发一个审批流系统,其中会用到拖拽工具来搭建流程,关于拖拽的实现我们

  • python中hashlib模块用法示例

    我们以前介绍过一篇Python加密的文章:Python 加密的实例详解.今天我们看看python中hashlib模块用法示例,具体如下. hashlib hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 具体应用 #!/usr/bin/env python # -*- coding: UTF-8 -*- #pyversion:python3.5 #owner:fuzj import h

  • bootstrap paginator分页前后台用法示例

    bootstrap paginator分页前后台用法示例,供大家参考,具体内容如下 准备工作: bootstrap-paginator.js 插件 github开源项目百度自行下载 引入js文件(JQuery1.8+bootstrap.min.js+bootstrap.css+bootstrap-paginator.js) <!--路径根据自己项目修改--> <link rel="stylesheet" href="/bootstrap/css/bootst

  • jQuery弹出层插件popShow(改进版)用法示例

    本文实例讲述了jQuery弹出层插件popShow(改进版)用法.分享给大家供大家参考,具体如下: 前面一篇<jQuery弹出层插件popShow用法示例>分析了popShow插件的基本用法,这里再对插件进行一番改进. popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <scr

  • PHP常见数学函数及BC高精度数学函数用法示例

    本文实例讲述了PHP常见数学函数及BC高精度数学函数用法.分享给大家供大家参考,具体如下: 1. bcadd 任意精度数的相加 2. bcsub 任意精度数的减法 3. bcmul 乘法, bcdiv除法 4. bcmod 取余数. (比%功能更强大) 5. bcpow 幂函数运算 6. bcsqrt 平方根 7. sqrt 平方根运算 7. pow求幂 8. abs 求绝对值 9. pi 得到圆周率数值 三角函数 sin cos tan asin acos atan(用弧度表达) deg2ra

  • Python自然语言处理 NLTK 库用法入门教程【经典】

    本文实例讲述了Python自然语言处理 NLTK 库用法.分享给大家供大家参考,具体如下: 在这篇文章中,我们将基于 Python 讨论自然语言处理(NLP).本教程将会使用 Python NLTK 库.NLTK 是一个当下流行的,用于自然语言处理的 Python 库. 那么 NLP 到底是什么?学习 NLP 能带来什么好处? 简单的说,自然语言处理( NLP )就是开发能够理解人类语言的应用程序和服务. 我们生活中经常会接触的自然语言处理的应用,包括语音识别,语音翻译,理解句意,理解特定词语的

随机推荐