AngularJs Directive

Before going through this article, I strongly recommend reading my previous articles:
  1. Fundamentals of AngularJs
  2. Basics Of AngularJs Controllers

Here in AngularJs a directive is a special instruction to the HTML tags to extend their functionality.

The AngularJs directive starts from the prefix (ng) or (data-ng).

The main difference between an ng directive and a data-ng directive is that if we are using the (ng-) prefix then the directive is only understood by and executed by the browser that support HTML5.

But if we are using the (data-ng) prefix then this directive is understood and executed by all the browsers, whether they support HTML 5 or not.

However if you are using (ng-) and it shows a Green line then you can avoid that by using the (data-ng) directive.
So here I am explaining some important directives in AngularJs.

1. ng-app
  • It is the root AngularJs directive.
  • Before including any directive we shall include this directive.
  • Without this directive no other directive will work.
  • Whereever you place this directive in between this area you can use your AngularJs code.
  • This HTML code defines how you use this directive.



2. ng-init
  • The ng-init directive initializes any variable in AngularJs.
  • This is very simple to use, just like you initialize a variable in C#, but before this you should prefix ng-init.
  • You could declare it as follows.
The output generated will be:

Note: The double curly braces indicate the data binding statements.


Whatever you write inside this, it will bind to the page.

3. ng-model

  • The ng-model directive binds the value of HTML controls (such as input, select and textarea) to the application data.
  • We can use this model data to retrieve the control data anywhere in the HTML form.
  • Provides type validation for application data (such as number, email and required).
debendra

This will be the output generated.

The main difference between data-bind expression ({{}}) and ng-bind.

This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.

The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.

4. ng-repeat

  • ng-repeat is just like a loop in our UI part.
  • It is mainly used to repeat the element from an array.
  1. <head runat="server">
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  3. <title></title>
  4. </head>
  5. <body>
  6. <form id="form1" runat="server">
  7. <div ng-app="">
  8. <div>
  9. <p>
  10. <span ng-model="Name=['Ram','Harish','sunita','vinod']"></span>
  11. </p>
  12. <br />
  13. <br />
  14. <ul ng-repeat="myname in Name">
  15. <li>
  17. {{myname}}
  19. </li>
  20. </ul>
  21. </div>
  22. </div>
  23. </form>
  24. </body>
The output will be:
  • Ram
  • Harish
  • sunita
  • vinod
5. ng-Copy
  • This is an excellent directive in AngularJs.
  • This directive will report if someone copies something from a webpage.
  1. <head runat="server">
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  3. <title></title>
  4. </head>
  5. <body>
  6. <form id="form1" runat="server">
  7. <div ng-app="">
  8. <div ng-init="action=false" ng-copy="action='True'">
  10. India (Listeni/ˈɪndiə/), officially the Republic of India (Bhārat Gaṇarājya),[12][c] is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;[d] China, Nepal, and Bhutan to the north-east; and Burma (Myanmar) and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India's Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.
  12. </div>
  13. <br />
  14. <br />
  15. <br />
  16. <b>
  17. <span>Have you copyed the text:-{{action}}</span>
  18. </b>
  19. </div>
  20. </form>
  21. </body>

SoWhen we run the page it will be like this:

Step 1
When we copy something from this web page.
Step 2
After coping the statue changed.


6. ng-Cut


The same as copy, AngularJs provides another directory, ng-cut, to specify if the content is to be cut from the web site or not.

If something is cut then the value becomes true.
  1. <head runat="server">
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  3. <title></title>
  4. </head>
  5. <body>
  6. <form id="form1" runat="server">
  7. <div ng-app="">
  8. <div ng-init="action=false" ng-cut="action='True'">, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;[d] China, Nepal, and Bhutan to the north-east; and Burma (Myanmar) and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India's Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.
  10. </div>
  11. <br />
  12. <br />
  13. <br />
  14. <b>
  15. <span>Have you Cut the text:-{{action}}</span>
  16. </b>
  17. </div>
  18. </form>
  19. </body>
Now to Cut some text:
  • select the text
  • press CNTRL+x
  • And then check the status.


This will be true when we cut some text from the web page.

7. ng-Paste

This directory becomes true if you paste something into an HTML element.
  1. <head runat="server">
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  3. <title></title>
  4. </head>
  5. <body>
  6. <form id="form1" runat="server">
  7. <div ng-app="">
  8. <div ng-init="action=false" ng-cut="action='True'">,
  11. <input type="text" ng-init="action=false" ng-paste="action='True'" />
  12. </div>
  13. <br />
  14. <br />
  15. <br />
  16. <b>
  17. <span>Have you Paste any text:-{{action}}</span>
  18. </b>
  19. </div>
  20. </form>
  21. </body>
Step 1


Step 2
Step 3

After pasting something it becomes true.

8. ng-hide

This directive is used to hide a HTML element when set to true.

When it is set to false it will unhide the element, or it comes into its default view.
I am now making ng-hide to true.
The text box is hidden on making ng-hide=true.

9. ng-click

This directive is equivalent to the click event of a button or onclick event of a HTML button.
  1. <div ng-app="mymodule" ng-controller="mycontroller">
  2. <input type="button" value="Click For Alert" ng-click="alert()" />
  3. </div>undefined</form>undefined</body>
Controller
  1. <head runat="server">
  2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  3. <script type="text/javascript">
  5. var mymodule = angular.module("mymodule", []);
  7. mymodule.controller('mycontroller', function ($scope) {
  9. $scope.alert = function () {
  11. alert("Hi Debendra");
  13. }
  15. });
  17. </script>
For a better understanding I have provided the following image.


The output will be:


10. ng-class

The ng-class allows you to dynamically set a CSS class on an HTML element by binding an expression that represents the class.

Here when you click the button and the CSS class will be attached to the div and its color will change.
Up to this I have explained in this article. For more about all this I will describe in my next article.