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 ...
随机推荐
- 写好的Java代码在命令窗口运行——总结
步骤: 1.快捷键 win+r,在窗口中输入cmd,enter键进入DOS窗口. 2.假设写好的代码的目录为:D:\ACM 在DOS中依次写入:cd d: cd ACM 利用cd切换到代码文件所在的目 ...
- cmd常用命令总结
1.cmd不同盘符之间切换 方法(1): cd /d 路径如:cd /d c:/windows 方法(2): d:2.cls 清空cmd窗口dir 查看文件夹下的目录md 创建文件夹rd 删除文件夹c ...
- 【C++】static关键字的总结
转自 https://www.cnblogs.com/BeyondAnyTime/p/2542315.html C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的s ...
- 黄聪：Windows2012-IIS8安装SSL证书
开始菜单->右上角搜索按钮-> mmc 弹出窗口 关闭控制台会提示保存 打开iis新建站点,为了兼容不支持sni的浏览器,绑定默认https
- Pytest高级进阶之Fixture
From: https://www.cnblogs.com/feiyi211/p/6626314.html 一. fixture介绍 fixture是pytest的一个闪光点,pytest要精通怎么能 ...
- 3.Qt GUI中一些操作记录
一.如何在Widget中利用代码添加背景图片 this->setAutoFillBackground(true); // QPalette palette = this->palette( ...
- three.js中的文字
1.三维文字 三维字体文字,使用的是FontLoader,字体文件通过来facetype.js生成 addCityText: function () { var self = this; var ci ...
- [UE4]接口
一个椅子可以被抓起和放下,一扇门可以打开和关上.一个抽屉可以拉开和关上. 椅子.门.抽屉都可以用手拉,然后放下,但是它们的打开和关上的行为是不一样的,它们之间没有继承关系,没法共用“打开”和“关闭”的 ...
- [UE4]Spline Mesh Actor
作用: 1.按照Spline设置的轨迹,进行显示网格物体. 曲线模型 一.赋值Static Mesh,任意的Static Mesh都可以. 二.调整方向 三.Spline Mesh Actor有2个端 ...
- asp.net 本地服务字段调用(WebSerice)的小问题
当有全局变量时,如:protected static Dictionary<string, string> SalesMail = new Dictionary<string, st ...