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 ...
随机推荐
- 2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解
2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解 NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP汇编指令:执行到NOP指令时,CPU仅仅当做一个 ...
- python selenium Chrome模拟手机浏览器（十七）
在做移动端页面测试时可以利用Chrome mobile emulation 辅助完成页面的适配问题,但是目前手机市场上的型号居多我们也没有办法通过人工的模式一一的去适配,所以这里考虑到通过自动化的模式 ...
- Python开发工程师技术手记
Python基础篇 PythonPEP8规范 Python历史与安装 Python注释 Python变量以及类型 Python标识符和关键字 Python输出 Python输入 Python运算符 P ...
- Centos7 kernel 内核升级 GPU显卡驱动程序编译安装
1.NVIDIA官网下载相关显卡驱动 #在服务器上查看网卡型号 lspci -mm | grep NVIDIA #在NVIDIA官网下载相应型号驱动程序 https://www.geforce.c ...
- Spring面试问答
1.什么是Spring框架?Spring框架有哪些主要模块? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题, ...
- elasticSearch 2.3 delete-by-query plugin
The delete-by-query plugin adds support for deleteing all of the documents which match the specified ...
- JavaScript问题——在浏览器中的offsetLeft/offsetWidth等属性是什么？
原文链接http://www.cnblogs.com/xiaohuochai/p/5828369.html https://blog.csdn.net/u012532033/article/detai ...
- [转][SqlServer]收缩日志
USE StudyDB ; GO ALTER DATABASE StudyDB SET RECOVERY SIMPLE;--设置简单恢复模式 GO ); GO ALTER DATABASE Study ...
- [转][C#]ImageHelper
{ internal static class ImageHelper { public static Bitmap CloneBitmap(Image source) { if (source == ...
- OkHttp之Interceptor
先看RealCall 发送一个请求,我们会先创建一个request,然后使用okHttpClient.newCall(request),创建一个call进行网络请求,这个call,就是RealCall ...