AngularJs Directive - Components and Containers

Directives can be of 2 types : 1. components - just show some data 2. containers - components that can contain components or data bindings using transclusion

by Varun Nath

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css">
<script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<div ng-app="myApp">
    <clock timezone="IST"></clock>

    <panel title="This is the container Title">
        
        <clock timezone="Component inside Container"></clock>
        
    </panel>
    
</div>

JavaScript

var app = angular.module('myApp', []);

//error is a component type of directive 
app.directive('clock', function () {
    return {
        restrict: 'E',
        scope: {
            timezone: '@'
        },
        template: '<div class="panel">{{timezone}}</div>'
    };
});


app.directive('panel',function(){
    return{
        restrict:'E',
        transclude:true,
        scope:{
            title:'@'
        },
        template:'<div style="border:3px solid black">'+
                    '<div>{{title}}</div>'+
                    '<div ng-transclude></div>'+ 
                    '</div>'
    };
});