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

  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.

 


Similar Articles