zoukankan      html  css  js  c++  java
  • AngularJS ngTouch 插件,替代原来的ng-click

    很多时候,我们会用 AngularJS 开发移动端页面,制作移动端页面肯定是离不开,touchstart , touchmove , touchend 这些动作,但是AngularJS 提供的ng-touch 模块并不是ngtouchstart 这种触屏事件,使点击延迟了,所以今天介绍的是由 国外人员写的另一个ng-touch ,实现移动端的touchstart,touchmove,touchend 这些事件

    使用方式,照旧,引入以下代码,然后再注入这个模块 ngTouch ,只需要把 ng-click 改成 ng-touchstart 就可以了

    "use strict";
    
    angular.module("ngTouch", [])
    .directive("ngTouchstart", function () {
        return {
            controller: ["$scope", "$element", function ($scope, $element) {
    
                $element.bind("touchstart", onTouchStart);
                function onTouchStart(event) {
                    var method = $element.attr("ng-touchstart");
                    $scope.$event = event;
                    $scope.$apply(method);
                }
    
            }]
        }
    })
    .directive("ngTouchmove", function () {
        return {
            controller: ["$scope", "$element", function ($scope, $element) {
    
                $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: ["$scope", "$element", function ($scope, $element) {
    
                $element.bind("touchend", onTouchEnd);
                function onTouchEnd(event) {
                    var method = $element.attr("ng-touchend");
                    $scope.$event = event;
                    $scope.$apply(method);
                }
    
            }]
        }
    });

      

  • 相关阅读:
    SQLServer: 解决“错误15023:当前数据库中已存在用户或角色
    DEV界面皮肤
    模拟业务最小测试用例
    POJ 2503 Babelfish(map)
    POJ 2001 Shortest Prefixes
    洛谷 P2672 推销员
    POJ 2104 K-th Number && 洛谷 P3834 【模板】可持久化线段树 1(主席树)
    洛谷 P1589 泥泞路
    HDU 6183 Color it(动态开点线段树)
    POJ 2482 Stars in Your Window
  • 原文地址:https://www.cnblogs.com/zion0707/p/4916345.html
Copyright © 2011-2022 走看看