AngularJS HTML DOM elements

AngularJS have directives for binding application data to the attributes of HTML DOM elements. Here some directives can be used to bind application data to attributes of HTML DOM elements such as:

Directive Name	Description
ng-click	Represents a AngularJS click event
ng-hide	Hides a given control
ng-disabled	Disables a given control
ng-show	Show a given control

The ng-click directive

The ng-click provide attribute to an HTML (Hyper Text Markup Language) button and update a model. Bind the model to HTML and see this variation.

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

For example: This example will provide showcase all the above define directives.

<html>
<head>
<title>First AngularJS HTML DOM</title>
</head>
<body>
<h2>First AngularJS Sample Application</h2>
<div ng-app="">
<table border="0">
<tr>
   <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
   <td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
   <td><input type="checkbox" ng-model="showHide1">Show Button</td>
   <td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
   <td><input type="checkbox" ng-model="showHide2">Hide Button</td>
   <td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
   <td><p>Total click: {{ clickCounter }}</p></td>
   <td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>

The ng-hide Directive

For this directive add an attribute to an HTML button and throw it to a model. So, bind the model to a checkbox and look this variation.

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>

Example

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
<div ng-app="">
 
<p ng-hide="true">I am Meraj Ansari not on this page visible.</p>
 
<p ng-hide="false">I am Meraj Ansari visible on this page.</p>
</div>
</body>
</html>

The ng-disabled directive

Add ng- disabled directive binds AngularJS application data to the disabled attribute of HTML elements. Bind the model to a checkbox and look this variation.

<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>

For example:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me for True or False!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
 
</body>
</html>

The ng-show directive

Add the ng-show attribute to an HTML (Hyper Text Markup Language) button and throw it a model. So, bind the model to a checkbox and look this variation.

<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>

How to create text and attribute bindings

READ AngularJS Dependency Injection

During the compilation process the compiler matches text and attributes utilizing the $interpolate service to see if they contain embedded expressions. So we can say that, these expressions are certified as watches and will modify time to time as part of the normal digest cycle.

For example:

<a ng-href="img/{{username}}.jpg">Hello i am Meraj Ansari {{username}}!</a>

How to create Directive

First of all, say about the API (Application Programming Interface) for registering directives. Much like directives and controller are registered on modules.For a registering any directive, you use the module.directive API. module.directive takes the normalized directive name created by a factory function.

The template-expanding directive

This template is repeated several times in your code. If you change it in one place, you have to change it in many others. So, we can say that, this is good opportunity to use directives to simplify your template. Let’s create a directive that simply replaces its contents with a static template:

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Meraj Ansari',
    address: 'Lucknow Road, Faizabad'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

Output:

Name: Meraj Ansari Address: Lucknow Road, Faizabad

Note that we have binding in this directive. After $compile compiles and links <div my-customer></div>, it will try to understand and match directives on the element’s children. That means you can optimize directives of different directives.