Angular-Touch库用法示例

2024-04-24 17:39:52

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

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 应用访问 Android 手机的图片库

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

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

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

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

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

开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心. 测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但在我的实际应用中却还是很有挑战.这里我就简单示范一下我是怎么操作的吧. Instant Karma Karma 是来Angular团队针对Java
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 )就是开发能够理解人类语言的应用程序和服务. 我们生活中经常会接触的自然语言处理的应用,包括语音识别,语音翻译,理解句意,理解特定词语的

Angular-Touch库用法示例

相关推荐

随机推荐