Dynamically add directives in AngularJS

For a walkthrough see http://blog.fourtonfish.com/post/74055065673/dynamically-add-directives-in-angularjs-no-jquery

by Michele Marcucci

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/ng-template" id="orders.tmpl.html">
    <h2 class="page-header">Orders-directive</h2>
    
    <table class="table">
  <thead>
  <tr>
    <th>Order Id</th>
    <th>Orderd By</th>
    <th>Created</th>
    <th>Item id</th>
    <th>Count</th>
    <th>State</th>
  </tr>
  </thead>
  <tbody ng-repeat="order in orders">
    <tr class="active">
      <td><b>{{order.id}}</b></td>
      <td><b>{{order.orderedBy}}</b></td>
      <td>{{order.created | date:'yyyy-MM-dd'}}</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr ng-repeat="item in order.items">
      <td></td>
      <td></td>
      <td></td>
      <td>{{item.itemNumber}}</td>
      <td>{{item.count}}</td>
      <td><span class="label label-success label">{{item.state}}</span></td>
    </tr>
  </tbody>
    {{content}}
</script>


<body style='padding:30px;' lang="en" ng-app="myApp" ng-controller="MainCtrl">
  <order-table orders="orders"></order-table>
  
  

<h4 class="page-header">Expected output from directive</h3>
<table class="table">
  <thead>
  <tr>
    <th>Order Id</th>
    <th>Orderd By</th>
    <th>Created</th>
    <th>Item id</th>
    <th>Count</th>
    <th>State</th>
  </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td><b>234324</b></td>
      <td><b>John Smith</b></td>
      <td>2015-05-01</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>225-3</td>
      <td>3</td>
      <td><span class="label label-success label">Sent</span></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>3423-1</td>
      <td>1</td>
      <td><span class="label label-primary label">Waiting from supplier</span></td>
    </tr>
    
    <tr class="active">
      <td><b>423423</b></td>
      <td><b>Eva Andersson</b></td>
      <td>2015-06-01</td>
      <td></td>
      <td></td>
...

JavaScript

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

function MainCtrl($scope) {
	$scope.orders = [
  	{
    	id: 234324,
      created: '2015-05-01T13:53:25.366Z',
      orderedBy: 'John Smith',
      items: [
        {
        	itemNumber: '225-3',
          count: 3,
          state: 'Sent'
        },
        {
        	itemNumber: '3423-1',
          count: 1,
          state: 'Waiting from supplier'
        }
      ]
    },
    {
    	id: 423423,
      created: '2015-06-01T13:53:25.366Z',
      orderedBy: 'Eva Andersson',
      items: [
        {
        	itemNumber: '423-3',
          count: 1,
          state: 'Sent'
        },
        {
        	itemNumber: '234-3',
          count: 3,
          state: 'Sent'
        }
      ]
    }
  ]
}


myApp.directive("orderTable", function(){
	return {
		restrict: "E",
		templateUrl: "orders.tmpl.html",
    scope: {
    	orders: '='
    },
    link(scope, element, attrs){
    	// Do some DOM maniupulation here?
    }
	}
});