---
title: "How to use Directives in Angular JS"  
description: "How to use Directives in Angular JS"  
author: "Anupam Mishra"  
published: 2016-02-23  
updated: 2016-02-24  
canonical: https://www.mindstick.com/forum/33996/how-to-use-directives-in-angular-js  
category: "angular js"  
tags: ["javascript", "angular js", "angularjs directive"]  
reading_time: 3 minutes  

---

# How to use Directives in Angular JS

Hi everyone,i have declare a one [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) box. [Code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii) is below: <[input](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java) type="text" [name](https://yourviews.mindstick.com/view/87450/how-to-generate-a-brand-name-using-linkedin-comprehensive-guide)="[UserName](https://www.mindstick.com/forum/12798/there-is-no-viewdata-item-of-type-ienumerable-selectlistitem-that-has-the-key-username)">\
I want to declare same text box as a [Angular](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) JS [directives](https://www.mindstick.com/blog/44/directives-in-asp-dot-net) in my [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) . Please can [anyone give me](https://answers.mindstick.com/qa/41194/can-anyone-give-me-some-high-and-low-points-of-each-of-the-four-first-presidential-administrations) solution.\
Thank you.

## Replies

### Reply by Manoj Bhatt

Hi Anupam,You are using a html code for creating a textbox.So now,we are using Directives in the above code is as follows:**Directives in Angular JS:** AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components.

> ```
>  @*Here we are using a various directives such as-ng-show,ng-repeat,ng-class,ng-                                               Controller etc. *@                    <div class="container">                        <div class="col-md-12">                            <div ng-show="divStudent">                                <p class="divHead">{{Action}} Student</p>                                <table>                                    <tr>                                        <td style="padding-right: 5px;"><b>Student ID</b></td>                                        <td style="padding-right: 5px;">                                                                                              <input type="text" class="form-control" ng-                                                                model="StudentID" />                                        </td>                                        <td style="padding-right: 5px;"><b>First Name</b></td>                                        <td style="padding-right: 5px;">                                            <input type="text" class="form-control" ng-                                                               model="FirstName" />                                        </td>                                        <td style="padding-right: 5px;"><b>Last Name</b></td>                                        <td style="padding-right: 5px;">                                         <input type="text" class="form-control" ng-                                                         model="LastName" />                                        </td>                                        <td style="padding-right: 5px;"><b>Enrollment Date</b>                                              </td>                                        <td style="padding-right: 5px;">                                            <input type="text" class="form-control" ng-                                                              model="EnrollmentDate" />                                        </td>                                    </tr>                                    <tr>                             <input type="button" class="btnAdd btn
> btn-primary" value="Save" ng-                                                 click="AddUpdateStudent()" />                                        </td>                                    </tr>                                </table>                            </div>                        </div>                    </div>
> ```


---

Original Source: https://www.mindstick.com/forum/33996/how-to-use-directives-in-angular-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.