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 ...
随机推荐
- Python 标准库笔记(1) — String模块
原文出处: j_hao104 String模块包含大量实用常量和类,以及一些过时的遗留功能,并还可用作字符串操作. 1. 常用方法 常用方法 描述 str.capitalize() 把字符串的首字母大 ...
- 小梵同学 GO!
刘德翠 1. Vue.js实战读书笔记(1) 2.Vue.js实战读书笔记--计算属性 3. Vue.js实战读书笔记--v-bind及class与style绑定 4. Vue.js实战读书笔记--内 ...
- 使用Pandas将多个数据表合一
使用Pandas将多个数据表合一 将多张数据表合为一张表,便于统计分析,进行这一操作的前提为这多张数据表互相之间有关联信息,或者有相同的列. import pandas as pd unames = ...
- php7 date函数警告去除
在代码头上添加 date_default_timezone_set("PRC");
- java 类的初始化顺序
有父类 1. 父类static成员变量 2. 父类static块 3. 父类非static成员 4. 父类非static块 5. 父类构造方法 子类,也按照1-5顺序执行 无父类 1. static成 ...
- PhpStorm 2018 破解方法
破解方法如下: 1.修改phpstrom的验证服务器地址. 在C:\Windows\System32\drivers\etc目录下打开hosts文件,并在文件最后加入 0.0.0.0 account. ...
- 一、新建springBoot项目
三种方式新建SpringBoot项目: 官网, myeclipse, idea 1.官方网站新建(https://start.spring.io/) 1)打开官网,选择自己需要的springBo ...
- Nginx访问控制
1.访问控制 涉及模块:ngx_http_access_module 模块概述:允许限制某些 IP 地址的客户端访问. 对应指令: allow 语法: allow address | CIDR | u ...
- 01_新建WebApi后端服务项目
1.打开微软官网: https://www.asp.net/learn 2.查看文章: https://docs.microsoft.com/en-us/aspnet/web-api/overview ...
- 巨坑– 膜BWV543
我不是一个喜欢膜别人的人,我从来都不擅长去夸奖.当面对巴赫的作品时,我发现我的敬佩难以用语言表达.我决定用另一种方式来表达我的欣赏,那就是分析并背下这个谱子. http://music.163.com ...