Quick Contact


    AngularJS Event

    When require some advance feature, to create an angular application (advanced) like a mouse click, keyboard presses, changes events, moves etc. The advance application focuses on handling DOM events in AngularJS. It provides a model to add an event listener in the HTML part.

    HTML Event Directives used in AngularJS Event

    There are certain directives available in angularJS to provide custom behavior to Dom Elements such as:

    • ng-blur
    • ng-change
    • ng-click
    • ng-dblclick
    • ng-focus
    • ng-keydown
    • ng-keyup
    • ng-keypress
    • ng-mousedown
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-mouseover
    • ng-mouseup
    ng-click

    The ng-click directive consists of that particular code when the element will click, it will execute.

    For example, we can use the ng-click event in AngularJS, when we click a button to display an alert box.

    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
    	< /script>
    	< /head>
    	< body ng-app="myapp" >
    	< h1>AngularJSng-click < /h1>
    	< div ng-controller="mycontroller">
    	Enter Name: < input type="text" ng-model="text" />< br />< br />
    	< button ng-click="Display(text)">Show Message< /button
    	< /div>
    	< script>
    	var x = angular.module('myapp', []);
    	x.controller("mycontroller", function ($scope, $window) {
    	$scope.Display = function (v) {
    	alert(v)
    	}
    	});
    	< /script>
    	< /body>
    	
    Output:
    AngularJS Event
    ng-dblclick

    The directive ng-dblclick in AngularJS invokes whenever an element with which ng-dblclick is attached is double-clicked. Angular JS will not override the element’s original

    On dblclick event, both are executed consecutively.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body ng-app="">
    	< p>Double-click the text Welcome:< /p>
    	< h1 ng-dblclick="x =x + 1"ng-init="x=0">Welcome< /h1>
    	< p>The text has been double-clicked {{x}} times.< /p>
    	< p> The count of the variable "x" increases every time when you double-click the text.< /p>
    	< /body>
    	< /html>
    	
    Output:
    AngularJS Event

    Enroll Yourself in Live Classes For Angular Tutorials.

    ng-focus

    This directive will execute the particular code when the user focuses on the element with which the ng-focus directive is attached.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body ng-app=""ng-init="x=0">
    	< input ng-focus="x = x + 1" />
    	< h1>{{x}}< /h1>
    	< p>The value of the variable "x" increases every time the input field gets focus.< /p>
    	< /body>
    	< /html>
    	
    Output:
    AngularJS Event
    ng-blur

    This directive will execute the particular code when a user loses focuses from the element with which ng-blur directive attach.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body ng-app="">
    	< input ng-blur="x = x + 1"ng-init="x=0" />
    	< h1>{{x}}< /h1>
    	< p>The value of the variable "x" increases every time the input field loses focus.< /p>
    	< /body>
    	< /html>
    	
    Output:
    AngularJS Event
    mouse events

    It occurs when the control of cursor moves over an element or an element is clicked by mouse event.

    The order of mouse event when the cursor moves over an element is:

    • ng-mouseover
    • ng-mouseenter
    • ng-mousemove
    • ng-mouseleave

    The order of mouse event when the mouse clicks on an element

    • ng-mousedown
    • ng-mouseup
    • ng-click
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
    	< style>
    	.pinkDiv{
    	width: 100px;
    	height: 70px;
    	background-color: pink;
    	padding:2px 2px 2px2px;
    	}
    	.lightblueDiv{
    	width: 120px;
    	height: 100px;
    	background-color: lightblue;
    	padding:2px 2px 2px2px;
    	}
    	< /style>
    	< /head>
    	< body ng-app="">
    	< h1>AngularJS Mouse Events < /h1>
    	< div ng-class="{pinkDiv: enter, lightblueDiv: leave}"ng- mouseenter="enter=true;leave=false;"ng-mouseleave="leave=true;enter=false">
    	Mouse < span ng-show="enter">Enter Color changes to pink< /span>< span ng-show="leave">Leave color changes to lightbluespan< /meta http-equiv="content-type" content="text>>
    	< /div>
    	< /body>
    	< /html>
    	
    Output:
    AngularJS Event

    In the above example, the ng-class directive includes a map of CSS classes, so pinkDiv will be applied if enter=true and lighblueDiv will be applied if leave=true.

    The ng-mouseenter directive sets ‘enter’ to true, which will apply pinkDiv class to the

    element. In the same way, ng-mouseleave will set leave to true, which will apply lightblueDiv class.

    $event

    When calling the function it can be passed as an argument. It contains the browser’s event object.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body>
    	< div ng-app="myapp"ng-controller="myctrl">
    	< h1 ng-mousemove="myFunc($event)">Take Mouse Over Me!< /h1>
    	< p>Coordinates are: {{x+ ', ' + y}}< /p>
    	< /div>
    	< script>
    	var p = angular.module('myapp', []);
    	p.controller('myctrl', function($scope){
    	$scope.myFunc = function(myE){
    	$scope.x = myE.clientX;
    	$scope.y = myE.clientY;
    	}
    	});
    	< /script>
    	< p>The value ofclientA and clientB from the event object is displayed whenever mouse is handed over heading "Take Mouse Over Me!".< /p>
    	< /body>
    	< /html>
    	
    Output:
    AngularJS Event
    AngularJS Event Handling

    When we will create an advance angularJS application, we require advanced features for that. Therefore, it requires handling of DOM elements like keyboard press, various mouse clicks etc. AngularJS Events can be handled from within directive itself by using the link function. The directive is allowed to attach itself to the DOM elements by the link in an HTML page.

    Syntax-

    link: function ($scope, element, attributes)

    Link is a function that accepts three parameters in it and they are:

    • Scope
    • The element with which directive associated
    • Attributes of the target element
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< metachrset="UTF 8">
    	< title>Event Registration< /title>
    	< /head>
    	< body>
    	< script src="https://code.angularjs.org/1.6.9/angular-route.js">< /script>
    	< scriptsrc="https://code.angularjs.org/1.6.9/angular.js">< /script>
    	< scriptsrc="https://code.angularjs.org/1.6.9/angular.min.js">< /script>
    	< scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js">< /script>
    	< div ng-app="DemoEvent">
    	< div ng-link="">Click Here< /div>
    	< /div>
    	< script type="text/javascript">
    	var demo = angular.module('DemoEvent',[]);
    	demo.directive('ngLink',function(){
    	return {
    	link:function($scope,ele,attrs) {
    	ele.bind('click',function () {
    	ele.html('You clicked here');
    	});}
    	}});
    	< /script>
    	< /body>
    	< /html>
    	
    Output

    Click Here

    When you click on the text click here the result will be:

    You Clicked here

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.