AngularJS: Create custom directive

Shankar Raman 03:58
Hi Guys,

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Here we will discuss about how to create a custom directive in AngularJS.

1. Create angular module
var app = angular.module('simpleDirective', []);
2. Add controller to the module which will have some dummy data model. 
app.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Shankar Raman',
    quantity: '1600'
  };
}]);
3. Now create directive which will return html template
app.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} <br/>Total Purchase Quantity: {{customer.quantity}}'
  };
});
4. In html you add this directive as attribute on div tag 
<div my-customer></div>

Here is full example.

index.html

<html ng-app="simpleDirective">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Controller">
  <div my-customer></div>
</div>
</body>
</html>

app.js
var app = angular.module('simpleDirective', []);

app.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Shankar Raman',
    quantity: '1600'
  };
}]);

app.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} <br/>Total Purchase Quantity: {{customer.quantity}}'
  };
});

Good Day :)

Post a Comment

0 Comments