AngularJS custom directives

Angular JS

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>

5 thoughts on “AngularJS custom directives”

  1. Very interesting, good job and thanks for sharing such a good blog. your article is so convincing that I never stop myself to say something about it. You’re doing a great job. Keep it up.

Leave a Reply

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