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

ng-click

This is a wrapped for tha default ngCick which allows you to specify custom behavior when an fa-surface is clicked. the wrapper is also design to be be used on touchscreen devices. It matches all the features supported by ngClick on including ngTouch module for all types of fa-surface. If ngTouch is requried to add touch click capabilites in non F/A elements. Add ngTouch dependence before adding famous.angular otherwise this functionality will be lost.

Dependencies

Usage

```html ```

Example

{% 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="ClickCtrl" id="app">
  <fa-modifier fa-size="[300, 100]">
    <fa-surface fa-background-color="'red'" ng-click="myClickHandler($event)">Click Me!  This has been clicked {{clicked}} times.</fa-surface>
  </fa-modifier>
</fa-app>{% endraw %}
{% raw %}#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
fa-surface {
  cursor: pointer;
}{% endraw %}
{% raw %}angular.module('faInputExampleApp', ['famous.angular'])
  .controller('ClickCtrl', ['$scope', function($scope) {
    $scope.clicked = 0;
    $scope.myClickHandler = function($event) {
      console.log($event);
      $scope.clicked++;
    }; 
}]);{% endraw %}

ng-click on an fa-surface

ng-click can be used on an fa-surface. Internally, a Famous Surface has a .on() method that binds a callback function to an event type handled by that Surface. The function expression bound to ng-click is bound to that fa-surface's click eventHandler, and when the fa-surface is clicked, the function expression will be called.