--- layout: "docs_api" version: "unstable" versionHref: "/docs/unstable" path: "api/directive/faTap/" title: "fa-tap" header_sub_title: "Directive in module famous.angular" doc: "faTap" docType: "directive" ---
Improve this doc

fa-tap

This directive allows you to specify custom behavior when an element is tapped.

Usage

```html ```

API

Attr Type Details
faTap expression

Expression to evaluate upon tap. (Event object is available as $event)

Example

Note: For testing purposes during development, enable mobile emulation: https://developer.chrome.com/devtools/docs/mobile-emulation

Fa-tap checks if a touchmove event fires between a touchstart and tap event. If the touchmove event fired, (the user "dragged" their finger), a fa-tap event will not fire. If the user did not "drag" their finger on touch, when releasing their finger, a tap event will fire, and fa-tap will fire.

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

  Edit in Plunker 
{% raw %}<fa-app ng-controller="TapCtrl">
  <fa-modifier fa-size="[100, 100]">
    <fa-surface fa-tap="tapHandler($event)"
                fa-background-color="'red'">
      Tap count: {{tapCount}}
    </fa-surface>
  </fa-modifier>
</fa-app>

<script>
  angular.module('faTapExampleApp', ['famous.angular'])
    .controller('TapCtrl', ['$scope', '$famous', function($scope, $famous) {
        
        $scope.tapCount = 0;

        $scope.tapHandler = function($event) {
          console.log($event);
          $scope.tapCount++;
        };

    }]);
</script>{% endraw %}
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

Fa-tap on an fa-view

Fa-tap may be used on an fa-view. The function expression bound to fa-tap will be bound to the fa-view's internal _eventInput, the aggregation point of all events received by the fa-view. When it receives a tap event, it will call the function expression bound to fa-tap.

In the example below, the fa-surface pipes its Surface events to an instantied Famous Event Handler called myEvents. Fa-view pipes from myEvents, receiving all events piped by the fa-surface.

When a tap event occurs on the fa-surface, it is piped to the fa-view.
fa-tap defines a callback function in which to handle tap events, and when it receives a tap event, it calls tap().

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

  Edit in Plunker 
{% raw %}<fa-app ng-controller="TapCtrl">

  <!-- The fa-view receives the tap event from the fa-surface, and calls $scope.tap, which is bound to fa-tap on the fa-view. -->

  <fa-view fa-tap="tap($event)" fa-pipe-from="myEvents">
    <fa-modifier fa-size="[100, 100]">
      <fa-surface fa-pipe-to="myEvents"
                  fa-background-color="'orange'">
        Tap count: {{tapCount}}
      </fa-surface>
    </fa-modifier>
  </fa-view>
</fa-app>

<script>
  angular.module('faTapExampleApp', ['famous.angular'])
    .controller('TapCtrl', ['$scope', '$famous', function($scope, $famous) {
        
        var EventHandler = $famous['famous/core/EventHandler'];
        $scope.myEvents = new EventHandler();

        $scope.tapCount = 0;
        
        $scope.tap = function($event) {
          console.log($event);
          $scope.tapCount++;
        };

    }]);
</script>{% endraw %}
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}