AngularJS ng-mousemove Directive

AngularJS ng-focus Directive

Last Updated : 03 Aug, 2022

The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements.

Syntax:

<element ng-focus="expression"> 
    Contents... 
</element>

Parameter:

expressions: It specifies what to do when the input gets focused.

Example 1: This example uses the ng-focus Directive to display the text area field.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-focus Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-focus Directive</h2> 
        <a href="" ng-focus="isCheck=true">
        Click to proceed.
    </a><br>
    <div class="row" ng-show="isCheck"> 
    Enter Name:
        <input type="text" 
               ng-focus="isCheck=true" 
               placeholder="geeksforgeeks" />
    </div>
</body>
</html>

Output:

Example 2: This example uses the ng-focus Directive to display focus on the input text field.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-focus Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app" style="text-align:center;">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>ng-focus Directive</h2>
    <div ng-controller="geek"> Input:
        <input type="text" 
               ng-focus="focused = true" 
               ng-blur="focused = false" /> 
            <pre ng-show="focused">
                Input is focused.
            </pre> 
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', 
                        function($scope) {}]);
    </script>
</body>
</html>

Output:

AngularJS ng-mousemove Directive

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

AngularJS ng-form Directive

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [

AngularJS ng-if Directive

The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it

AngularJS ng-mouseup Directive

The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax:

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"> Content

AngularJS ng-mousemove Directive

The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements. Syntax:<element ng-mousemove="expressio

AngularJS ng-href Directive

The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m

AngularJS ng-mouseover Directive

The ng-mouseover Directive in AngularJS is used to apply custom behavior when a mouseover event occurs on a specific HTML element. It can be used to show a popup alert when the mouse moves over a specific element. It is supported by all HTML elements. Syntax: <element ng-mouseover="expression"

AngularJS ng-keyup Directive

The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by <input>, <select> and <textarea> elements. Syntax: <element ng-keyup="expression"> Contents... </element> Parameter: expression: When a keypress is finished, then t

AngularJS ng-model Directive

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

AngularJS ng-include Directive

AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes