angularJs没有touch事件.这里提供一个touch指令.

ngTouch.js

"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);

      };

    }

  };

});

使用:

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <title>angular的touch事件</title>

        <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>

</html>

angularjs的touch事件的更多相关文章

  1. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  2. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  3. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  4. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  5. 第六课 touch事件

    1.移动端页面在PC上浏览时,限制宽度的方法: 2.移动端页面切换设备时自动刷新页面的方法: 3.touch事件 touchstart:当手指触摸屏幕时触发.通过addEventListener添加移 ...

  6. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  7. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  8. H5中的touch事件

    touch中共有touchstart.touchmove和touchend三个事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结 ...

  9. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

随机推荐

  1. 什么是Angular? 我们为什么要学习它？

    在我更新Ionic的时候有人问我什么是 Angular,我们为什么要学习它啊?这个是我的疏忽了,在没有告诉你们什么是 Angular 的时候就让大家着手去学习 Ionic .那么今天就让我们认识一下什 ...

  2. linux getch()实现

    #include <termio.h> int getch(void){     struct termios tm, tm_old;     int fd = 0, ch;       ...

  3. Java 设计模式泛谈&装饰者模式和单例模式

    设计模式(Design Pattern) 1.是一套被反复使用.多人知晓的,经过分类编目 的 代码设计经验总结.使用设计模式是为了可重用代码,让代码更容易维护以及扩展. 2.简单的讲:所谓模式就是得到 ...

  4. bzoj 2878: [Noi2012]迷失游乐园

    #include<iostream> #include<cstring> #include<cstdio> #define M 100005 #define ld ...

  5. UIActionSheet的使用

    UIActionSheet是在iOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件. 为了快速完成这例子,我们打开Xcode 4.3.2, 先建立一个single view applicatio ...

  6. Solr整合中文分词组件IKAnalyzer

    我用的Solr是4.10版本, 在csdn下载这个版本的IKAnalyzer:IK Analyzer 2012FF_hf1.zip 解压后目录如下: (1)这里还用solr自带的example实验分词 ...

  7. Redis应用场景(转)

    (来源:http://www.cnblogs.com/shanyou/archive/2012/09/04/2670972.html) Redis常用数据类型 Redis最为常用的数据类型主要有以下五 ...

  8. In close() at SocketHttpClientConnection in Android

    In close() at SocketHttpClientConnection Error In Android. when i tried to acess network data on Mai ...

  9. Python开发入门与实战9-基于vs的集成开发环境

    9. 基于visual studio的Python的集成开发环境 上一章我们描述了如何安装使用Java的集成开发环境Eclipse IDE,本章我们来说明另一种集成开发环境,也是笔者多年的开发习惯使用 ...

  10. Jmeter—6 CSV Data Set Config 通过文件导入数据

    线程组循环次数大于1的时候,请求里每次提交的数据都相同.有的系统限制了不能提交相同数据,我们通过 CSV Data Set Config 加载csv文件数据. 1 创建一个文本文件,输入参数值保存为. ...