ngCopy, ngCut And ngPaste Directive In AngularJS

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

<h4>ngCopy Example</h4>
<div ng-controller="HomeController">
<input ng-copy="copy()">
<br /> Copy count: {{countCopy}}
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
$scope.countCopy = 0;
$scope.copy = function ()
{
$scope.countCopy = $scope.countCopy + 1;
}
});

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

<h4>ngCut Example</h4>
<div ng-controller="HomeController">
<input ng-cut="cut()">
<br /> Cut count: {{countCut}}
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
$scope.countCut = 0;
$scope.cut = function ()
{
$scope.countCut = $scope.countCut + 1;
}
});

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

<h4>ngPaste Example</h4>
<div ng-controller="HomeController">
<input ng-paste="paste()">
<br /> Paste count: {{countPaste}}
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
$scope.countPaste = 0;
$scope.paste = function ()
{
$scope.countPaste = $scope.countPaste + 1;
}
});

Output

Output

Summary

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