Detecting Touch on ionContent


Hey guys, I’m trying to detect when an input field has been tapped in the following way, but I also need to know when I’ve tapped out of it (out of focus), so that I can show/hide other elements in the view.


var searchBox = angular.element(document.querySelector('input'));

$ionicGesture.on('tap', function(e) {
  ctrl.hasHeader = false;
}, searchBox);

I’ve tried the following and it doesn’t work.

var ionContent = angular.element(document.querySelector('ion-content'));

$ionicGesture.on('tap', function(e) {
  ctrl.hasHeader = true;
}, ionContent);

I’m sure there’s a better way… Thanks in advance.


I wouldn’t bother detecting a touch event. I’d just use the ‘focus’ and ‘blur’ events in a directive.

.directive("detectFocus", function() {
  return {
    "restrict" : "AC",
    "link" : function(scope, elem, attrs) {

      elem.on("focus", function() {
        console.log( + " has focus!");
      elem.on("blur", function() {
        console.log( + " lost focus");


Nice solution. The directives works. The console messages shows what happens. But how do I use it in my code. How do I detect a text fileld has got focus.

BTW attrs in the console statement is undefined


Got a solution with:

'use strict';

app.directive('detectFocus', ['$rootScope', function($rootScope) {
  return {
    'restrict' : 'AC',
    'link' : function(scope, elem, attrs) {

      elem.on('focus', function(attrs) {
        console.log( + ' has focus!');
        scope.$apply( function() {
          scope.$emit('elemHasFocus', {
              message: elem[0].placeholder
      elem.on('blur', function(attrs) {
        console.log( + ' lost focus');

The event you can listen to. Put an attribute of the field you like.