AngularJS custom directives

Include files

To extend the functionality of HTML in AngularJS, custom directives are used using “directive” function. This simply replaces the element for which this is activated.

Using its compile() method AngularJS application finds the matching elements and process for one time activity.

For the following types of elements AngularJS provides support to create custom directives.
– Element directives
– Attribute
– Comment


<title>AngularJS custom directives</title>
<h2>AngularJS custom directives</h2>
<div ng-app="myApp" ng-controller="UserController">
<user name="John"></user>
<user name="Jane"></user>
<user name="Steve"></user>
<script src=""></script>
var myApp = angular.module("myApp", []);

myApp.directive('user', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Name: <b>{{}}</b>, Age: <b>{{user.age}}</b>";

directive.scope = {
user : "=name"

directive.compile = function(element, attributes) {
element.css("border", "1px solid #ffffff");

var linkFunction = function($scope, element, attributes) {
element.html("Name: <b>"+$ +"</b>, Age: <b>"+$scope.user.age+"</b><br/>");
element.css("background-color", "#c2c2c2");
return linkFunction;

return directive;

myApp.controller('UserController', function($scope) {
$scope.John = {};
$ = "John Doe";
$scope.John.age  = 47;

$scope.Jane = {};
$ = "Jane Doe";
$scope.Jane.age  = 33;

$scope.Steve = {};
$ = "Steve Martin";
$scope.Steve.age  = 25;


For any types of queries, you can contact us on

You may like:  HTML DOM - AngularJS

One thought on “AngularJS custom directives”

Leave a Reply

Your email address will not be published. Required fields are marked *