By kswaughs | Monday, June 20, 2016

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

Birth Days of famous People


Recommend this on


3 comments:

  1. IEEE Final Year projects India Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Projects for CSE It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
    Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai


    The Nodejs Training Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete