首页 / ANGULAR / AngularJS ionic手势事件的使用总结

AngularJS ionic手势事件的使用总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS ionic手势事件的使用总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6562字，纯文字阅读大概需要10分钟。

内容图文

这两天学习了AngularJS手势事件感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

长按 : on-hold

在屏幕同一位置按住超过500ms，将触发on-hold事件：

你可以在任何元素上使用这个指令挂接监听函数：

<any on-hold=“…”>…</any>

示例代码：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-hold=”show_delete();”>
<h1 class=”title”>on-hold</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item>
{{item}}
<ion-delete-button class=”ion-minus-circled”></ion-delete-button>
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class=”bar-positive”></ion-footer-bar>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicListDelegate) {
$scope.items=[“China”,”Japan”,”India”,”Russian”];
$scope.show_delete = function(){
$ionicListDelegate.showDelete(true);
};
});

敲击 : on-tap

在屏幕上快速点击一次（停留时间不超过250ms），将触发on-tap事件：

可以在任何元素上使用这个指令挂接事件监听函数：

<any on-tap=“…”>…</any>

示例代码：

<head>
<meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height”>
<script src=”ionic.bundle.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”ionic.min.css”>
</head>
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-tap</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item on-tap=”show(item);”>
{{item}}
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicPopup) {
$scope.items=[“England”,”Japan”,”India”,”Russian”];
$scope.show = function(item){
$ionicPopup.alert({
title : “警告!”,
template : “为什么要敲 “+ item + “?”
});
};
});

双击 : on-double-tap
在屏幕上快速敲击两次，将触发on-double-tap事件：

可以在任何元素上使用这个指令挂接事件监听函数：

<any on-double-tap=“…”>…</any>

示例代码：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-double-tap=”title='I am double tapped!'”>
<h1 class=”title”>{{title}}</h1>
</ion-header-bar>
<ion-content>
<p ng-include=”‘txt/xiyouji.txt'”></p>
</ion-content>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.title = “on-double-tap”;
});

按下/松开 on-touch/on-release

在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时，会立即触发on-release事件。

可以在任何元素上挂接响应的事件监听函数：

<any on-touch=“…” on-release=“…”>…</any>

示例代码：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” ng-class=”[style]”
on-touch=”style='bar-assertive'” on-release=”style='bar-positive'”>
<h1 class=”title”>on-touche/on-release</h1>
</ion-header-bar>
<ion-content>
<img src=”img/0021.png”>
</ion-content>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
});

拖拽 : on-drag

在屏幕上按住并移动时，触发on-drag拖拽事件：

根据运动方向的不同，可以细分为以下几种事件：

on-drag – 向所有方向拖动时都触发此事件
on-drag-up – 向上拖动时触发此事件
on-drag-down – 向下拖动时触发此事件
on-drag-left – 向左拖动时触发此事件
on-drag-right – 向右拖动时触发此事件

可以在任意元素上使用这些指令挂接对应的事件监听函数：

<any on-drag=“…”>…</any>

示例代码：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-drag</h1>
</ion-header-bar>
<div class=”scroll-content has-header padding”>
<img src=”img/baymax.png” on-touch=”onTouch($event)” on-drag=”onDrag($event);”>
</div>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
var ox,oy;
$scope.onTouch = function($event){
ox = $event.target.offsetLeft;
oy = $event.target.offsetTop;
};
$scope.onDrag = function($event){
var el = $event.target,
dx = $event.gesture.deltaX,
dy = $event.gesture.deltaY;
el.style.left = ox + dx + “px”;
el.style.top = oy + dy + “px”;
};
});

划动 : on-swipe

在屏幕上按住并快速拖动时，将触发on-swipe划动事件：

根据划动方向的不同，可细分为以下指令：

on-swipe – 向任何方向的划动都触发事件
on-swipe-up – 向上划动时触发事件
on-swipe-down – 向下划动时触发事件
on-swipe-left – 向左划动时触发事件
on-swipe-right – 向右划动时触发事件

可以在任何元素上使用这些指令挂接事件监听函数：

<any on-swipe=“…”>…</any>

示例代码：

<body ng-controller=”ezCtrl”>
<div class=”scroll-content padding”
on-swipe-up=”onSwipeUp()”
on-swipe-down=”onSwipeDown()”
on-swipe-left=”onSwipeLeft()”
on-swipe-right=”onSwipeRight()”>
<p class=”padding”>按住鼠标快速划！</p>
<i class=”icon {{icon}}”></i>
</div>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope){
$scope.icon=”ion-arrow-expand”;
$scope.onSwipeUp = function(){
$scope.icon=”ion-arrow-up-a”;
};
$scope.onSwipeDown = function(){
$scope.icon=”ion-arrow-down-a”;
};
$scope.onSwipeLeft = function(){
$scope.icon=”ion-arrow-left-a”;
};
$scope.onSwipeRight = function(){
$scope.icon=”ion-arrow-right-a”;
};
});

脚本接口 : $ionicGesture

除了使用之前介绍的特定指令实现手势事件的监听，也可以使用$ionicGesture服务注册/解除手势事件监听：

on(eventType,callback,$element,options) – 注册手势事件监听函数

参数eventType是支持的事件类型，参看下面介绍；参数callback指定监听函数；参数$element是要绑定事件的jqLite元素。

on()方法返回的是一个ionic.gesture对象，可供解除监听用。

off(gesture,eventType,callback) – 解除手势事件监听函数

参数gesture是on()方法返回的结果对象，参数callback是要移除的监听函数。

$ionicGesture服务支持的事件类型有：

hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release

示例代码：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>$ionicGesture</h1>
</ion-header-bar>
<ion-content class=”padding”>
<button class=”button” id=”test”>test</button>
</ion-content>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) {
var el = document.querySelector(“#test”);
$ionicGesture.on(“tap”,function(){
$ionicPopup.alert({
title : “提醒”,
template : “这个监听是用$ionicGesture服务注册的！”
})
},angular.element(el));
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的AngularJS ionic手势事件的使用总结全部内容，希望文章能够帮你解决AngularJS ionic手势事件的使用总结所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/341774.html

来源：【匿名】

【上一篇】Angular 2.0+ 的数据绑定的实现示例【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【AngularJS ionic手势事件的使用总结】教程文章相关的互联网学习教程文章

angularjs培训之重新理解双向绑定和事件详解【代码】【图】

双向绑定是angularjs亮点之一，在前面的《angularjs培训之helloworld》篇中大概介绍了下双向绑定，现在我们“旧事重提”，先看下下面的代码片段：view中： <input type=‘button‘ ng-click="set()" value="set Value"> <input type="text" ng-model=‘userName2‘>controller中对应的方法： $scope.set = function(){ $scope.userName2 = ‘Eason‘; } $scope.$watch(‘userName2‘,function(){ alert(‘ng-model us...

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定【图】

一、DI-控制器参数$scope - 在js和html之间传递数据 - 仅在控制器作用域内有效$element - 是一个jQuery对象 - 作用域控制器所在的html元素 - 在js中，通过$element获取DOM对象 - var e = $element.children().eq(0); - $scope.w = e.width(); - $scope.h = e.height();$http - http协议请求 - $http.get(url).success(function(result){});二、DI-监听$watch - 监听变化 - 语法 - $scope.$watch(...

angularjs学习笔记—事件指令【代码】

ngClick适用标签：所有触发条件：单击#html <div ng-controller="LearnCtrl"><div ng-click="click()">click me</div><button ng-click="click()">click me</button> </div>#script angular.module(‘learnModule‘, []).controller(‘LearnCtrl‘, function ($scope) {$scope.click = function () {alert(‘click‘);}});ngDblclick适用标签：所有触发条件：双击#html <div ng-controller="LearnCtrl"><div ng-dblclick="dblclick...

angularjs中的事件传播$emit,$broadcast,$on【代码】

在这里写的技术点一部分参考AngularJs权威教程一部分参考的是其它的博主的知识点事件 :如同浏览器响应浏览器层的事件，比如鼠标点击、页面滚动那样，Angular应用也可以响应Angular事件. 这使我们在我们应用中嵌套各组件之间进行通信,即使这些组件在创建的时候并未考虑其他组件.我们可以认为事件是在应用中传播的事件信息片段,通常包含应用中发生的事件信息注意: AnjularJs事件系统并不与浏览器中的事件系统相通,这意问着...

angular指令监听ng-repeat渲染完成后执行自定义事件方法【代码】

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作，angular本身并没有提供监听ng-repeat渲染完成的指令，所以需要自己创建自定义指令。在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even，$index会随着每次遍历（从0开始）递增，当遍历到最后一个时，$last的值为true，所以可以通过判断$last的值来监听ng-repeat的执行状态，怎么在遍历过程中拿到$last的值：自定义指令var app = angul...

angular JS中使用jquery datatable添加checkbox点击事件【代码】

‘use strict‘;app.controller(‘DataTableCtrl‘, function ($scope, $compile) {$scope.selected = [];$scope.isSelected = function (obj,index, id) {var checkbox = obj.target;checkbox.checked ? $scope.selected.push(id) : $scope.selected.splice(index,1);console.log($scope.selected);}$scope.simpleTableOptions = {sAjaxSource: ‘/Home/Index‘,"sServerMethod": "POST","bProcessing": true,"bServerSide": true...

javascript-使用Angular指令使用$scope属性更新DOM-指令运行后立即运行(无需等待事件)【代码】

如果您看这个小提琴：http://jsfiddle.net/rodhartzell/u4zVd/1/ 您可以看到,直到处理了已订阅的事件之一,该指令才说明模型$scope.bar.您是否知道一种使指令在绑定后立即识别模型的方法？element.keyup(scope.onEdit).keydown(scope.onEdit).focus(scope.onEdit).live('input paste', scope.onEdit);element.on('ngChange', scope.onEdit);解决方法:我对整个问题的处理方式会有所不同.与其绑定事件,不如设置手表长度： Live demo h...

javascript – AngularJS：从父级到子级的广播事件【代码】

我想从父指令向子女广播事件.但是如果我在父指令链接函数中使用scope.broadcast,那么每个“parent”指令中的所有子节点都会接收它. 它现在如何运作：如果父(1)广播事件,则子(1.1)和(2.1)接收事件. 我希望它如何工作：我想将父母(1)的事件仅播放给孩子(1.1),而不是孩子(2.1). 我的指令检查了元素是否在屏幕上.我只想要一个这样的指令,只有这个指令才能将事件发送给其他人.<div><div parent> <div child></div> <!-- 1.1 -...

Angular的事件和表单详解【图】

前面的文章说道了click事件，与其类似的mouseover以及mousemove等等。下面看看selected、change、copy等运用在表单的事件吧。 selected <div ng-controller="Aaa"><input type="checkbox" ng-model="aaa" value="{{aaa}}"><select><option>11111</option><option ng-selected="aaa">22222</option><option>33333</option></select></div><script type="text/javascript">var m1 = angular.module(myApp,[]);m1.controller(Aaa,[$s...

AngularJS之DOM实现ng-keyup事件【图】

本文主要和大家介绍了AngularJS对动态增加的DOM实现ng-keyup事件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。我们经常在网页中看到这种形式的内容，如图：用鼠标点击一下，就变成了一个input，如图：如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。我在想这个是这么实现的？想了一下有这么一个思...

AngularJS怎么定义的点击事件？angularjs的事件的详细介绍

本篇文章主要的介绍了关于angularjs的事件的详细解析，还有angularjs的ng-click指令的实例，最后还有HTML隐藏元素的分析。下面就让我们一起来看看这篇文章吧AngularJS 事件AngularJS 有自己的 HTML 事件指令。ng-click 指令ng-click 指令定义了 AngularJS 点击事件。AngularJS 实例<p ng-app="" ng-controller="myCtrl"><button ng-click="count= count + 1">点我！</button><p>{{count }}</p></p>隐藏 HTML 元素ng-hide 指令用于设...

AngularJS事件发布你知道多少，现在这篇文章告诉你想要知道angularjs事件详情【图】

本文主要的介绍了关于angularjs事件发布的详情，你想要知道更多吗？那赶紧看过来吧，现在我们一起来阅读本篇文章吧未读消息提醒：当器具用户或技术机构对非强检器具检校申请发布新的意见时，需要对对方进行消息通知。后台很简单，本文主要解决前台遇到的问题。历史遗留这是我的消息遗留下来的统计未读消息的指令，用到了缓存superCache。一眼看去应该能发现这个if...else的问题，第一次请求，将数据放到缓存里，之后就一直从缓存中...

AngularJS对动态增加的DOM实现ng-keyup事件示例【图】

这篇文章主要介绍了AngularJS对动态增加的DOM实现ng-keyup事件示例，现在分享给大家，也给大家做个参考。我们经常在网页中看到这种形式的内容，如图：用鼠标点击一下，就变成了一个input，如图：如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。我在想这个是这么实现的？想了一下有这么一个思路：普通情况下这个是一个p或p元素，点击...

Angular使用操作事件指令ng-click传多个参数示例【图】

这篇文章主要介绍了Angular使用操作事件指令ng-click传多个参数,结合实例形式分析了AngularJS事件指令及相关的响应、处理操作技巧,需要的朋友可以参考下本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能。分享给大家供大家参考，具体如下：<!DOCTYPE html> <html ng-app="myApp"> <head><meta charset="UTF-8"><title>www.gxlcms.com angular ng-click用于操作事件的指令</title><script src="angular.min.js"></scri...

关于AngularJsng-change事件/指令用法

本文主要介绍了AngularJs ng-change事件/指令的小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。定义和用法ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。ng-change 指令需要搭配 ng-model 指令使用。AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。ng-change 事件...

首页 / ANGULAR / AngularJS ionic手势事件的使用总结

AngularJS ionic手势事件的使用总结

内容导读

内容图文

内容总结

内容备注

内容手机端

【AngularJS ionic手势事件的使用总结】教程文章相关的互联网学习教程文章

IONIC - 相关标签

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程