AngularJS - Directives

transclusion complete

by Shashank Srivastava

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <panel>
            <div class='other'>Another component</div>
        </panel>
    </div>
</div>

CSS

.other {
    background: lightgray;
    color: black;
}
.panel {
    background: blue;
    color:white;
    border: 1px solid black;
    padding:2px;
}

JavaScript

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

myApp.controller('myCtrl', function ($scope) {});

myApp.directive('panel', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: "<div class='panel'> This is the content of panel <div ng-transclude></div></div>"
    };
});