In this article I will explain with an example, how to use ng-paste directive in AngularJS.
 
 

HTML Markup

The following HTML Markup consists of:
DIV – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
TextBox – For capturing user input.
The HTML INPUT TextBox has been assigned with the following AngularJS directive.
ng-paste – Called when the text is pasted into the TextBox.
SPAN – For displaying message.
<div ng-app="MyApp" ng-controller="MyController">
    <input type="text" ng-paste="Paste()" placeholder="Paste Here" />
    <hr />
    Pasted: <span style="font-weight:bold">{{Pasted}}</span>
</div>
 
 

Implementing ng-paste Directive

Inside the HTML Markup, the following AngularJS script file is inherited:
1. angular.min.js
Then, inside the Controller, the Pasted variable is set to FALSE.
When the text is pasted into the TextBox, the Paste function is called and it is also called if the (Ctrl + v) is pressed on keyboard without even pasting any text.
Inside this function, the Pasted variable is set to TRUE, which will be later displayed on the page using SPAN element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        // By default false.
        $scope.Pasted = false;
        $scope.Paste = function () {
            // Set to true.
            $scope.Pasted = true;
        }
    });
</script>
 
 

Screenshot

ng-paste example in AngularJS
 
 

Demo

View Demo
 
 

Downloads

Download Code