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程序设计有所帮助。
相关推荐
-
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 )就是开发能够理解人类语言的应用程序和服务. 我们生活中经常会接触的自然语言处理的应用,包括语音识别,语音翻译,理解句意,理解特定词语的
随机推荐
- 浅谈DOM的操作以及性能优化问题-重绘重排
- 高性能WEB开发 web性能测试工具推荐
- Mysql运行环境优化(Linux系统)
- eclipse自动提示和自动补全功能实现方法
- js游戏人物上下左右跑步效果代码分享
- JS统计Flash被网友点击过的代码
- asp.net简单生成XML文件的方法
- Repeater全选删除和分页实现思路及代码
- phpmyadmin3 安装配置图解教程
- js初始化验证实例详解
- C#之Expression表达式树实例
- C++设计模式编程中的迭代器模式应用解析
- php上传图片并压缩的实现方法
- Linux管理员手册(4)--内存管理
- jquery判断小数点两位和自动删除小数两位后的数字
- js onpropertychange输入框 事件获取属性
- 主页面中的两个iframe实现鼠标拖动改变其大小
- CentOS中vsftp安装与配置详解
- 实现Android 滑动退出Activity的功能
- vue指令之表单控件绑定v-model v-model与v-bind结合使用