example of simple transclusion

<!DOCTYPE html>
<html ng-app="blog-post">

  <head>
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <post title="A Post" author="mbriggs" date-posted="2010-01-01">
      Hi. This is a blog post created in a terribly inefficient way.
    </post>
    
    <post title="Another Post" author="mbriggs" date-posted="2010-01-02">
      Aparently we didn't learn our lesson, because we keep writing posts via programming
      instead of using an engine.
    </post>
  </body>

</html>

angular.module('blog-post', []).

directive('post', function(){
  return {
    restrict: 'E',
    templateUrl: 'post.html',
    transclude: true,
    scope: {
      title: '@',
      author: '@',
      datePosted: '@'
    }
  }
});

post {
  display: block;
  padding: 10px 20px;
  background-color: #EEE;
  margin-bottom: 20px;
}

post header {
  margin-bottom: 50px;
}

post header h1 {
  margin-bottom: 0px;
}

post .post-body {
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 22.5px;
}

<header>
  <h1>{{title}}</h1>
  <h6>by {{author}} at {{datePosted}}</h6>
</header>

<div ng-transclude class='post-body'>
</div>