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. 通过MD5排除重复文件

    今天下载了好多美女图片壁纸,可是看了一下发现好多图片重复了,有强迫症的我必须把重复的都给剔除掉,首先想到的当然是百度了,问问度娘有没有什么图片去重的工具,搜了一下还真有.奈何本人智商捉急用不来这高级的 ...

  2. Windows 下java环境变量的配置（Windows7 ，8，8.1，10）

    Windows 下java环境变量的配置 在“系统”面板的左上角选择“高级系统设置”,在弹出的系统属性中选择”高级“项,然后点击右下角的“环境变量(N)...”,就此进入JAVA环境变量的配置. 如果 ...

  3. MJRefresh的一个注意事项

    如果从视图一跳转到视图二之后,在视图二中进行MJRefresh的刷新操作,那么在推出试图二之前要用dealloc函数将MJRefreshHeaderView或者MJRefreshFooterView释 ...

  4. 验证页面多个input文本的必填项

    前台页面 JS : function CheckMustWrite(){ var count = $("input[mustwrite = 'true']", document.f ...

  5. fifo write

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/types. ...

  6. GFT_News Auto

    using AnfleCrawler.Common; using Newtonsoft.Json.Linq; using System; using System.Collections.Generi ...

  7. java.io.IOException: Too many open files

    1.描述: 每日一样,例行打开hadoop集群的cloudera manager的管理界面.发现出现了多个bad health的服务.那么出现的这个问题就是查看该服务运行的日志,对应的该服务当中,会包 ...

  8. 用php完成数据库的增删改查

    <?php//一.连接数据库$con = mysql_connect("localhost","root","");//二.验证是否连 ...

  9. SVG文档的注意事项

    SVG 是 HTML5 关于描述矢量图的元素.可以写在 <html> </html> 中,也可以保存为一个单独的.svg文件. 单独作为一个svg文件的时候,有一点规则需要注意 ...

  10. YUSE_DOWN-批下载

    *&---------------------------------------------------------------------**& Report YTST_CX_DO ...