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
– 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="https://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>

For any types of queries, you can contact us on info@namasteui.com.

4 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 *