Introduction

AngularJS provides many built-in directives. In this article we will discuss about ngCopy, ngCut and ngPaste directives.

ngCopy

This directive is useful to define custom behavior on copy event. It executes at highest priority.

Syntax

<input, textarea, select, a, window ng-copy="expression">
...
</nput, textarea, select, a, window>

Example

The following code count how many times we copy the content of textbox using "ctrl + C" keyboard command or context menu.

HTML

  1. <h4>ngCopy Example</h4>
  2. <div ng-controller="HomeController">
  3. <input ng-copy="copy()">
  4. <br /> Copy count: {{countCopy}}
  5. </div>
Controller
  1. var app = angular.module("app", []);
  2. app.controller("HomeController", function ($scope)
  3. {
  4. $scope.countCopy = 0;
  5. $scope.copy = function ()
  6. {
  7. $scope.countCopy = $scope.countCopy + 1;
  8. }
  9. });
Output

ngCopy

ngCut

This directive is useful to define custom behavior on cut event. It executes at highest priority.

Syntax

<input, textarea, select, a, window ng-cut="expression">
...
</nput, textarea, select, a, window>

Example

The following code count how many times we cut the content of textbox using "ctrl + X" keyboard command or context menu.

HTML
  1. <h4>ngCut Example</h4>
  2. <div ng-controller="HomeController">
  3. <input ng-cut="cut()">
  4. <br /> Cut count: {{countCut}}
  5. </div>
Controller
  1. var app = angular.module("app", []);
  2. app.controller("HomeController", function ($scope)
  3. {
  4. $scope.countCut = 0;
  5. $scope.cut = function ()
  6. {
  7. $scope.countCut = $scope.countCut + 1;
  8. }
  9. });
Output

ngCut

ngPaste

This directive is useful to define custom behavior on paste event. It executes at highest priority.

Syntax:

<input, textarea, select, a, window ng-paste="expression">
...
</nput, textarea, select, a, window>

Example:

The following code count how many times we paste the content to textbox using "ctrl + V" keyboard command or context menu.

HTML
  1. <h4>ngPaste Example</h4>
  2. <div ng-controller="HomeController">
  3. <input ng-paste="paste()">
  4. <br /> Paste count: {{countPaste}}
  5. </div>
Controller
  1. var app = angular.module("app", []);
  2. app.controller("HomeController", function ($scope)
  3. {
  4. $scope.countPaste = 0;
  5. $scope.paste = function ()
  6. {
  7. $scope.countPaste = $scope.countPaste + 1;
  8. }
  9. });
Output

Output

Summary

The ngCopy, ngCut and ngPaste are important directives in AngularJS. This article will help you to learn all of them.