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 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 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 Summary
The ngCopy, ngCut and ngPaste are important directives in AngularJS. This article will help you to learn all of them.