<!doctype html><html lang="en"><head><meta charset="UTF-8"><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script><script src="script.js"></script><link rel="stylesheet" type="text/css" href="styles.css"></head>
<body ng-app="transclusion">
<div>
<jp-alert-msg>OMG, I'm talking about Angular at EmberConf!!!!</jp-alert-msg>
</div>
</body>
</html>
angular.module('transclusion', [])
.directive('jpAlertMsg', function() {
return {
restrict: 'E',
transclude: true,
template: '<div class="alert" ng-transclude></div>'
};
});
div.alert{
background: red;
padding: 20px;
color: white;
}