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. Android ImageView的scaleType属性与adjustViewBounds属性

    ImageView的scaleType的属性有好几种,分别是matrix(默认).center.centerCrop.centerInside.fitCenter.fitEnd.fitStart.fi ...

  2. 二模 (16) day1&day2

    第一题:题目大意: 数列a[0]=a[1]=1, a[n]=a[n-2]*a[n-1]*n,求a[n]的因子个数 mod 1000000007.  n<=1000000 解题过程: 1.递推式还 ...

  3. webix custom component-九宫格

    上篇大致讲了对源码的理解,这篇展示一个初步的九宫格控件.直接上源码: webix.protoUI({ name:"grid", $init:function(config){ co ...

  4. redis入门指南-安装redis

    纸上得来终觉浅 绝知此事要躬行 Redis官方不支持window.微软发布了可在redis的分支.不建议使用 但我确实用了. win7 redis2.8.4  php5.6  apache2.4 ht ...

  5. Android 命令管理项目

    今天介绍一下Android怎么用命令管理项目,用命令管理Android项目需要用到Android命令,首先介绍一下用Android命令创建新项目,打开命令提示窗口,导航到Android SDK 的to ...

  6. 从0到1---“保多多”APP的开发（一）

    2015年8月份,我正式接手了公司保多多APP的开发(和另一个同事一起). 我之前并没有过从0开始创建一款APP,这次能有这样的机会,实在让我感到兴奋.因为我相信,作为这款APP的主要开发人员,在这一 ...

  7. Bean property '**DAO' is not writable or has an invalid setter method

    ApplicationContext.xml中配置有问题,里面的bean的属性名称写错了. ApplicationContext.xml中写的是loginDAO,在java类里配置的bean却写成了l ...

  8. JAVA ，Map接口 ，迭代器Iterator

    1.    Map 接口概述 java.util.Map 接口描述了映射结构, Map 接口允许以键集.值集合或键 - 值映射关系集的形式查看某个映射的内容. Java 自带了各种 Map 类. 这些 ...

  9. HDU2222

    http://acm.hdu.edu.cn/showproblem.php?pid=2222 注意: 1. keyword可以相同,因此计算时要累计:cur->num++. 2. 同一个keyw ...

  10. C++ iostream的线程安全性问题

    标准C里面的printf, fprintf之类的,会给FILE指针上锁(在unix平台上就是记录锁,按照msdn的说法windows上也有类似的锁),所以单次函数调用总是线程安全的: 要注意,这里只对 ...