AngularJS Nested Directives Example

This post explains how to create custom nested directives in AngularJS application.

Nested Directive means a directive under another directive.

In this example, we will display birthdays of famous people born in a specific month.

HTML & AngularJS code

<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
        
    var app = angular.module("NestedDirectiveExample",[])
    app.directive('month',function(){
        return{
            transclude:true,
            restrict:'E',
            scope: {
                nm: '@'
            },
            template:'<div class="start">'+
                     '<div class="mtitle">{{nm}}</div>'+
                     '<div ng-transclude></div>'+
                     '</div>'
            
        }
    });

    app.directive('entry',function(){
        return{
            restrict:'E',
            scope: {
                dt: '@',
                nm: '@',
                car:'@'
            },            
            template : '<div class="grid">'+
                       '<div class="grid-left">{{dt}}</div>'+
                       '<div class="grid-center">{{nm}}</div>'+
                       '<div class="grid-right">{{car}}</div>'+
                       '</div>'
           
        }
    });
</script>
</head>
<body>
    <H4>Birth Days of famous People</H4>
    <div ng-app="NestedDirectiveExample">
    <month nm="January">
        <entry  dt="6"  nm="Rowan Atkinson" car="Actor"></entry>
        <entry  dt="8"  nm="Stephen Hawking" car="Scientist"></entry>
        <entry  dt="11" nm="Rahul Dravid" car="Cricketer"></entry>
    </month>
    <month nm="April">
        <entry  dt="7"  nm="Jackie Chan" car="Actor"></entry>
        <entry  dt="24" nm="Sachin Tendulkar" car="Cricketer"></entry>
    </month>
    <month nm="December">
        <entry  dt="18"  nm="Steven Spielberg" car="Director"></entry>
        <entry  dt="19"  nm="Ricky Ponting" car="Cricketer"></entry>
        <entry  dt="22"  nm="Srinivasa Ramanujan" car="Scientist"></entry>
    </month>
    </div>
</body>
</html>

styles.css

.start{
    padding-bottom: 30px;
}
.mtitle{ 
    padding:10px 0px 10px 15px;
    width : 600px;
    font-weight : bold;
    font-family: Verdana, Geneva, sans-serif;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    background: #008000;
    color:#ffffff;
    font-size: 14px;
}
.grid{ 
    width: 600px; 
    padding:20px 0px 30px 0px;
    font-weight : bold;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
} 
.grid-left{ 
    width:45px; 
    float:left; 
    padding:10px 0px 10px 0px;
    background: #3399ff;
    color:#ffffff;
    border-radius: 5px;
    text-align : center;
} 
.grid-center{ 
    width:310px; 
    float:left; 
    padding:10px 0px 10px 15px;
    border-radius: 2px;
    margin-left:10px;
    background: #ff9966;
    color:#800000;
} 
 .grid-right{ 
    width:180px; 
    float:left; 
    padding:10px 0px 10px 15px;
    margin-left:10px;
    border-radius: 3px;
    background: #ff9999;
    color:#990000;
 }

Output

kswaughs.com

By kswaughs | Monday, June 20, 2016

AngularJS Nested Directives Example

Birth Days of famous People

Recommend this on

1 comment: