AngularJS ng-mousedown Directive
The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements.
Syntax:
<element ng-mousedown="expression">
Contents...
</element>
Parameter:
- expression: When the mouse button is clicked then the expression will be executed.
Example 1: This example uses ng-mousedown Directive to set the style of an element after clicking the mouse.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >ng-mousedown Directive</ title >
</ head >
< body ng-app style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-mousedown Directive</ h2 >
< div >
< p ng-mousedown="geek={'color':'green',
'font-size':'larger'}"
ng-mouseup = "geek={'font-size':''}"
ng-style = "geek"
ng-class = "'button'" >
Hold mouse click to see effect.
</ p >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example uses the ng-mousedown Directive to display an alert message after clicking the input area.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >ng-mousedown Directive</ title >
</ head >
< body ng-app = "app" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-mousedown Directive</ h2 >
< div ng-controller = "app" >
Input:
< input type = "text"
ng-mousedown = "alert()"
ng-model = "click" />
</ div >
< script >
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.click = 'geeksforgeeks';
$scope.alert = function () {
alert($scope.click);
}
}]);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
08 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...