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的更多相关文章

  1. AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...

  2. .Net Core MVC 网站开发（Ninesky） 2.4、添加栏目与异步方法

    在2.3中完成依赖注入后,这次主要实现栏目的添加功能.按照前面思路栏目有三种类型,常规栏目即可以添加子栏目也可以选择是否添加内容,内容又可以分文章或其他类型,所以还要添加一个模块功能.这次主要实现栏目 ...

  3. C#给PDF文档添加文本和图片页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  4. html中如何添加提示信息

    提示:在标签中添加title属性 1.文本中如何添加提示信息? 1.1直接在标签中加title="值": 例如:<p title="爱笑,爱哭,爱生活"& ...

  5. Windows server 2012 添加中文语言包(英文转为中文)（离线）

    Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...

  6. Intellij idea添加单元测试工具

    1.idea 版本是14.0.0 ,默认带有Junit,但是不能自动生成单元测试,需要下载JunitGererator2.0插件 2.Settings -Plugins,下载 JunitGenerat ...

  7. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  8. ExtJS 4.2 Date组件扩展：添加清除按钮

    ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...

  9. .Net Core MVC 网站开发（Ninesky） 2.2、栏目管理功能-System区域添加

    在asp或asp.net中为了方便网站的结构清晰,通常把具有类似功能的页面放到一个文件夹中,用户管理功能都放在Admin文件夹下,用户功能都放在Member文件夹下,在MVC中,通常使用区域(Area ...

随机推荐

  1. tcpdump+wireshark抓包分析

    上一篇文章中,我们介绍了tcpdump如何抓包. tcpdump是命令行下便捷的抓包和分析工具,但使用方式不够友好, wireshark是带图形化界面的抓包和分析工具,操作简便,但需要主机有显示器. ...

  2. C#使用CH341 SPI模块读写SD卡

    SD卡相关CMD命令 ;//卡复位 ; ;//命令9 ,读CSD数据 ;//命令10,读CID数据 ;//命令12,停止数据传输 ;//命令16,设置SectorSize 应返回0x00 ;//命令1 ...

  3. MQTT研究之EMQ：【wireshark抓包分析】

    基于上篇博文[SSL双向验证]的环境基础,进行消息的具体梳理. 环境基础信息: . 单台Linux CentOS7.2系统,安装一个EMQTTD的实例broker. . emq的版本2.3.11. . ...

  4. Excel技巧--提取中文字串

    类似的,如果要提取上图第1列的商品,不要型号,如第2列. 可以考虑使用SEARCHB函数. searchb与search的区别,在于searchb函数以字节为单位搜索,search函数以字符为单位搜索 ...

  5. Win7下，nginx默认80端口被System占用，造成nginx启动报错

    在win7 32位旗舰版下,启动1.0.8版本nginx,显示如下错误: 2012/04/02 13:55:59 [emerg] 7864#2376: bind() to 0.0.0.0:80 fai ...

  6. VsCode配置go环境及插件安装

    在vscode中安装go插件. 安装git. 在%GOPATH%\src\目录下,建立golang.org文件夹,并再新建x文件夹. 目录为 "%GOPATH\src\golang.org\ ...

  7. ssh登录原理及免密登录配置

    ssh登录原理参考: https://www.cnblogs.com/hukey/p/6248468.html ssh登录有两种方式: 1):用户名密码登录 2):基于秘钥的登录 ssh免密登录指的就 ...

  8. Centos7开机启动自己的脚本的方法

    在百度上可以找到好几种Linux开机启动各种服务的方法,在这里我写的是自己喜欢的方式. 博主是一个不怎么记事的人,有些配置在系统的目录下,配置了一次后就忘了,再也不想去系统的目录下找各种奇奇怪怪的目录 ...

  9. oracle修改sequence，查询sequence信息

    -- 1.查询sequence当前值. select serviceproviderid.nextval from dual; -- 2.查询sequence最大值SELECT SEQUENCE_NA ...

  10. 关于Python的Mixin模式

    转自:http://www.bjhee.com/python-mixin.html 像C或C++这类语言都支持多重继承,一个子类可以有多个父类,这样的设计常被人诟病.因为继承应该是个”is-a”关系. ...