Angular Latest: Empty Fiddle

http://angularjs.org/

by Peter Johnson

HTML

<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<popup title="large title" width="large">
    The contents of my popup and calling some stuff from the parent scope.
</popup>


<popup title="small title" width="small">
    The contents of my popup and calling some stuff from the parent scope.
</popup>

CSS

.popup {
    background: gray;
    margin: 10px auto;
}

.popup.large { width: 80%; }
.popup.small { width: 50%; }

.popup .title {
    font-size: 2em;
}

JavaScript

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

myApp.directive('popup', function() {
    return {
        restrict: 'E',
        scope: {
            title: '@',
            width: '@'
        },
        transclude: true,
        template: '<div class="popup" ng-class="width">\
            <div class="title">{{title}}</div>\
            <div class="content" ng-transclude="true"></div>\
        </div>'
    };
});