Dynamically add directives in AngularJS

Hacking my way to glory

by dbouwman

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://raw.githubusercontent.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-0.1.0.min.js"></script>
<section ng-app="myApp" ng-controller="MainCtrl">
    <h1>Dynamically Add Directives</h1>    
   <!--  <input type="text" ng-model="greeting"> -->
       
    <div id="space-for-buttons"></div>
        
   
    <button od-block-adder class="btn btn-default" x-blocks="header.blocks" >Add Block</button>

    <!-- block viewer will watch the header.blocks array and render items as they are added --> 
    <div class="container">
        <div od-block-viewer id="block-container" x-img-editor="editImageBlock()" class="container" x-blocks="header.blocks">Yar</div>
    </div>
<pre>
{{header | json}}
</pre>
</section>

CSS

section{
    padding: 2em;   
}
button{
    padding:0.3em;
    margin: 0.3em;
}
.od-block{
    min-height:150px;
    width:90%;
    border: 1px solid #CCC;
    margin:10px;
}

JavaScript

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

function MainCtrl($scope) {
	$scope.count = 0;
    $scope.greeting = 'Y HALO THAR PEEPS OV EARTH';

    //hack
    $scope.editImageBlock = function(data){
        console.log('    in editor...');
        console.log('    block data: ' + JSON.stringify(data));
        if(data){
            data.url = 'http://placehold.it/300x200';
            console.log('    updated url...');
        }else{
            console.warn('    data was undefined!');
        }
        
    };
    
    $scope.$on('edit:img',function(data){
        console.log('    in edit:img handler...');
        //console.log('    block data: ' + JSON.stringify(data));
        if(data){
            data.url = 'http://placehold.it/300x200';
            console.log('    updated url...' + data.url);
        }else{
            console.warn('    data was undefined!');
        }
    });

    
$scope.header = {
  blocks:[
    {
      name:'block 1', 
      directive:'od-img-text',
      blockData:[ 
        {
          odImgBlock: {
            url:'http://placekitten.com/400/150',
            alt:'all the kitteh',
            title: 'differnt text'
          }
        },
        {
          odTextBlock:{
            md: '### Fo Jupen'
          }
        }
      ]
    },{
      name:'block 2', 
      directive:'od-three-up',
      blockData: [
        [
          {
            odImgBlock:{
              url:'http://placekitten.com/300/200',
              alt:'all the kitteh',
              title: 'mai kitteh'
            }
          },{
            odTextBlock:{
               md: '### Markdown'
            }
          }
        ],
        [
          {
            odImgBlock:{
              url:'http://placekitten.com/300/200',
              alt:'all the kitteh',
              title: 'mai kitteh'
            }
          },{
            odTextBlock:{
               md: 'Second box'
            }
          }
        ],
        [
          {
            odImgBlock:{
   ...