ionicModal中的监听事件

//添加监听事件angular.module(‘MyApp‘).directive(‘gotTapped‘, [‘$ionicGesture‘, function($ionicGesture) {

    return {
        restrict: ‘A‘,
        link: function($scope, $element, $attr) {

            $ionicGesture.on(‘tap‘, function(e) {
                console.log(‘I got Tapped!‘)
            }, $element);
        }
    }
}])
<div got-tapped>Tap Me!</div>
//选择元素
document.querySelector();

栗子:

 <body ng-controller="MyCtrl" class="padding">
    <div class="bar bar-header bar-positive">
      <h1 class="title">{{lastEventCalled}}</h1>
    </div>
    <ion-content id="eventPlaceholder" has-bouncing="false"></ion-content>
  </body>
angular.module(‘ionicApp‘, [‘ionic‘])

.controller(‘MyCtrl‘, function($scope, $ionicGesture, $window, $interval) {
  $scope.lastEventCalled = ‘Try to Drag the content up, down, left or rigth‘;
  var element = angular.element(document.querySelector(‘#eventPlaceholder‘));
  var events = [{
    event: ‘dragup‘,
    text: ‘You dragged me UP!‘
  },{
    event: ‘dragdown‘,
    text: ‘You dragged me Down!‘
  },{
    event: ‘dragleft‘,
    text: ‘You dragged me Left!‘
  },{
    event: ‘dragright‘,
    text: ‘You dragged me Right!‘
  }];

  angular.forEach(events, function(obj){
    $ionicGesture.on(obj.event, function (event) {
      $scope.$apply(function () {
        $scope.lastEventCalled = obj.text;
      });
    }, element);
  });
});

参考:http://codepen.io/shprink/pen/txliu/?editors=101

时间: 2024-11-12 08:24:07

ionicModal中的监听事件的相关文章

EditText中onEditorAction监听事件执行两次

Android的EditText通过setOnEditorActionListener给文本编辑框设置监听事件,但是在其处理方法onEditorAction中的逻辑在每次回车后都触发了两次,原来是在键盘回车的ACTION_UP和ACTION_DOWN时都会触发这个方法,因此修改代码如下,就防止了两次执行: 1 public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { 2 //以下方法防止两次发送请求 3 i

js中的监听事件总结

javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event 1.滚动条监听事件 例:监听滚动条距离页面顶端距离 1 <script type="text/javascript"> 2 window.onscroll= function(){ 3 //变量t是滚动条滚动时,距离顶部的距离 4 var t = document.documentElement.scrollTop||document.body.

vue v-on监听事件

在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title>

Android中Button的五种监听事件

简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activity本身作为事件监听器,实现onClickListener5.外部类作为监听器 ButtonListenerActivity.class public class ButtonListenerActivity extends AppCompatActivity implements View.On

Android中Preference的使用以及监听事件分析

> 在Android系统源码中,绝大多数应用程序的UI布局采用了Preference的布局结构,而不是我们平时在模拟器中构建应用程序时使用的View布局结构,例如,Setting模块中布局.当然,凡事都有例外,FMRadio应用程序中则使用了View布局结构(可能是该应用程序是marvel公司提供的,如果由google公司做,那可说不准).归根到底,Preference布局结构和View的布局结构本质上还是大同小异,Preference的优点在于布局界面的可控性和高效率以及可存储值的简洁性(每个

jquery中,使用append增加元素时,该元素的绑定监听事件失效

举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本框,监听值变化.常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用,例如该按钮的点击监听事件应该这样写: $("#resultArea").on("input property

关于AngularJs中监听事件及脏循环的理解

可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下: $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchE

Vue 为什么在 HTML 中监听事件?

为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难.实际上,使用 v-on 有几个好处: 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM

Android实现TextView中部分文字监听事件

通常我们只需要用TextView来显示文本信息,展示给用户看,而把点击相应的监听事件交给Button等控件来处理,当然TextView也可以实现点击事件.有时候我们要对TextView中的部分文字进行点击,我们应该如何操作呢?一般有以下三种方式: 1,在布局文件中设置TextView的android:autoLink属性,比如设置android:autoLink="phone",则可以点击手机号码直接拨打电话.android:autoLink设置是否当文本为URL链接/email/电话