AngularJS custom directives

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
– CSS
– Comment

Example:

<html>
<head>
<title>AngularJS custom directives</title>
</head>
<body>
<h2>AngularJS custom directives</h2>
<div ng-app="myApp" ng-controller="UserController">
<user name="John"></user>
<user name="Jane"></user>
<user name="Steve"></user>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);

myApp.directive('user', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Name: <b>{{user.name}}</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>"+$scope.user.name +"</b>, Age: <b>"+$scope.user.age+"</b><br/>");
element.css("background-color", "#c2c2c2");
}
return linkFunction;
}

return directive;
});

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

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

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

</script>
</body>
</html>