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
I got many useful informations about this topic from your blog. Really very useful for learning the skills
ReplyDeleteAngularJS Training in Tambaram
AngularJS Training in Porur
AngularJS Training in Velachery
Angularjs Training in chennai
AngularJS Training in T Nagar
Web Designing Training in OMR
Web Designing Training in T Nagar
Web Designing Training in Tambaram
Thanks for sharing your views about the concept which you know much better. Its easy to read and understand by the way you wrote the blog contents.
ReplyDeleteAngularJS Training in Chennai
Web Designing Course in chennai
AngularJS Course in Chennai
Web Designing training in chennai
AngularJS Training in Anna Nagar
Web Designing Training in Velachery
AngularJS Training in T Nagar
Web designing Training in Tambaram
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.
ReplyDeleteSpring 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