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. WCF初探-4：WCF消息交换模式之请求与答复模式

    请求与答复模式( Request/Reply) 这种交换模式是使用最多的一中,它有如下特征: 调用服务方法后需要等待服务的消息返回,即便该方法返回 void 类型 相比Duplex来讲,这种模式强调的 ...

  2. iOS开发UI篇—Kvc简单介绍

    ios开发UI篇—Kvc简单介绍 一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observ ...

  3. 倒计时js代码

    <div class="time"> <span id="t_d">00天</span> <span id=" ...

  4. Makefile三个有用变量$@,$^,$<

    $@:目标文件 $^:所有的依赖文件 $<:第一个依赖文件 使用上面三个变量就可以简化我们的Makefile文件: #简化后的Makefile main : main.o log.o test_ ...

  5. ASIHTTPRequest下载示例（支持断点续传）

    一.创建网络请求队列 首先,创建网络请求队列,如下: ASINetworkQueue   *que = [[ASINetworkQueue alloc] init]; self.netWorkQueu ...

  6. K2BPM怎么让金融数据更有意义？

    西南证券成立于1999年,是唯一一家注册地在重庆的全国综合性证券公司,也是中国第九家上市证券公司和重庆第一家上市金融机构.公司现有员工逾2000名,在全国27个省份获批设立109家证券营业部,拥有17 ...

  7. HDU 4352 XHXJ's LIS

    奇妙的题. 你先得会另外一个nlogn的LIS算法.(我一直只会BIT.....) 然后维护下每个数码作为结尾出现过没有就完了. #include<iostream> #include&l ...

  8. 传智播客JavaWeb day06-jstl

    一.jsp标签(sun公司提供的) 二.EL表达式 三.jstl (javaserver pages standard tag library) 1.为什么要有jstl jsp标签太弱,el表达式功能 ...

  9. excel导入导出

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using FS.Exten ...

  10. bootstrap-13

    bootstrap框架中制作导航条主要通过“.nav”样式.默认的.nav样式不提供默认的导航方式,必须附加另外一个样式才会有效,比如.nav-tabs,.nav-pill之类. 导航(标签型导航): ...