angualrjs添加ngTouch
angularjs没有touch时间需要添加directive
插件代码如下
"use strict";
angular.module("ngTouch", [])
.directive("ngTouchstart", function () {
return {
controller: function ($scope, $element, $attrs) {
$element.bind('touchstart', onTouchStart);
function onTouchStart(event) {
var method = $element.attr('ng-touchstart');
$scope.$event = event;
$scope.$apply(method);
};
}
};
}).directive("ngTouchmove", function () {
return {
controller: function ($scope, $element, $attrs) {
$element.bind('touchstart', onTouchStart);
function onTouchStart(event) {
event.preventDefault();
$element.bind('touchmove', onTouchMove);
$element.bind('touchend', onTouchEnd);
};
function onTouchMove(event) {
var method = $element.attr('ng-touchmove');
$scope.$event = event;
$scope.$apply(method);
};
function onTouchEnd(event) {
event.preventDefault();
$element.unbind('touchmove', onTouchMove);
$element.unbind('touchend', onTouchEnd);
};
}
};
}).directive("ngTouchend", function () {
return {
controller: function ($scope, $element, $attrs) {
$element.bind('touchend', onTouchEnd);
function onTouchEnd(event) {
var method = $element.attr('ng-touchend');
$scope.$event = event;
$scope.$apply(method);
};
}
};
});
html代码如下：
<script type="text/javascript" src="../../js/angular.min-1.4.3.js"></script>
<script type="text/javascript" src="../../js/ngTouch.js" ></script>
<script type="text/javascript">
var app=angular.module("app",["ngTouch"]);
app.controller("touchCtrl",function($scope){
$scope.touchStart=function(){
alert("touchStart");
}
$scope.touchMove=function(){
console.log("touchMove");
}
$scope.touchEnd=function(){
alert("touchEnd");
}
});
</script>
</head>
<body>
<div ng-controller="touchCtrl">
<button ng-touchstart="touchStart()">touchStart</button>
<button ng-touchmove="touchMove()">touchMove</button>
<button ng-touchend="touchEnd()">touchEnd</button>
</div> </body>
当然如果用到其中一个事件，可以直接使用在controller上面
例如（代码可能有问题仅做参考）：
app.controller("touchCtrl",function($scope){
$scope.touchStart=function(){
alert("touchStart");
}
$scope.touchMove=function(){
console.log("touchMove");
}
$scope.touchEnd=function(){
alert("touchEnd");
}
}).directive("ngTouchstart", function () {
return {
controller: function ($scope, $element, $attrs) {
$element.bind('touchstart', onTouchStart);
function onTouchStart(event) {
var method = $element.attr('ng-touchstart');
$scope.$event = event;
$scope.$apply(method);
};
}
};
})
代码仅做参考，场景需要自己调试
angualrjs添加ngTouch的更多相关文章
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...
- .Net Core MVC 网站开发（Ninesky） 2.4、添加栏目与异步方法
在2.3中完成依赖注入后,这次主要实现栏目的添加功能.按照前面思路栏目有三种类型,常规栏目即可以添加子栏目也可以选择是否添加内容,内容又可以分文章或其他类型,所以还要添加一个模块功能.这次主要实现栏目 ...
- C#给PDF文档添加文本和图片页眉
页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...
- html中如何添加提示信息
提示:在标签中添加title属性 1.文本中如何添加提示信息? 1.1直接在标签中加title="值": 例如:<p title="爱笑,爱哭,爱生活"& ...
- Windows server 2012 添加中文语言包(英文转为中文)（离线）
Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...
- Intellij idea添加单元测试工具
1.idea 版本是14.0.0 ,默认带有Junit,但是不能自动生成单元测试,需要下载JunitGererator2.0插件 2.Settings -Plugins,下载 JunitGenerat ...
- ExtJS 4.2 业务开发(三)数据添加和修改
接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...
- ExtJS 4.2 Date组件扩展：添加清除按钮
ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...
- .Net Core MVC 网站开发（Ninesky） 2.2、栏目管理功能-System区域添加
在asp或asp.net中为了方便网站的结构清晰,通常把具有类似功能的页面放到一个文件夹中,用户管理功能都放在Admin文件夹下,用户功能都放在Member文件夹下,在MVC中,通常使用区域(Area ...
随机推荐
- Day 18 常用模块（二）
一.随机数:RANDOM 1.(0,1)小数:random.random() 2.[1,10]整数:random.randint(1,10) 3.[1,10)整数:random.randrang(1, ...
- Java String类和StringBuffer类的区别
1.String与StringBuffer的区别简单地说,就是一个变量和常量的关系.StringBuffer对象的内容可以修改:而String对象一旦产生后就不可以被修改,重新赋值其实是两个对象.St ...
- error: Cannot find OpenSSL's <evp.h> Mac
问题 mac安装php需要openssl ./configure –with-openssl 报错 error: Cannot find OpenSSL’s 解决 brew install opens ...
- 在windows系统上使用pip命令安装python的第三方库
在windows系统上使用pip命令安装python的第三方库 通过cmd启动命令行后,直接输入pip命令,有时候命令行会提示我们pip不是一个指令,这个时候我们可以通过python的集成开发环境里面 ...
- 查看CentOS版本
1. 查看核心版本 $ uname -or $ uname -a 2. rpm $ rpm --query centos-release [On CentOS] $ rpm --query redha ...
- 如何在本地同时管理github仓库和codingnet仓库？
本文的前提条件是你在电脑上接入了github或者gitlab的仓库,现在要接入codingnet的仓库. 电脑上已经有了 github 的 ssh key,怎么继续接入codingnet 的git仓库 ...
- Azure CosmosDB (6) 冲突类型和解决策略
<Windows Azure Platform 系列文章目录> 当我们为CosmosDB配置多个Azure Region写入,就需要考虑冲突类型和解决策略. 对于配置了多个写入区域的 Az ...
- winform 打印时的默认单位
通过设置Graphics.PageUnit,是枚举类型GraphicsUnit,默认是display(指定显示设备的度量单位. 通常,视频显示使用的单位是像素:打印机使用的单位是 1/100 英寸.)
- 黄聪：C#使用GeckoFx拦截监控Http数据
找了整整两天,在大海捞针之后,终于在上古代码中找到了一个可用的.... 可以用喜极而泣来形容测试有效之后的心情!!! 跟cefsharp相比geckofx最大的优点就是模式更接近于IE,包括node. ...
- web安全类
web安全类主要分为两个部分:CSRF和XSS 一.CSRF 基本概念:CSRF,通常称为跨站请求伪造,英文名Cross-site request forgery 缩写为CSRF; 怎么防御 1.To ...