Minimal directive example

from https://groups.google.com/forum/?fromgroups#!topic/angular/Ovn-5jVK3So

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div>
    <parent></parent>   
</div>

JavaScript

var app = angular.module('myApp', []);
app.value('CONFIG', {});

app.directive('parent', function(CONFIG, $compile, $q) {
		var template = '<child></child>'
    return {
        restrict: 'E',
        scope: {},
        link: {
        	pre: function(scope, elem, attrs) {
          	var deferred = $q.defer();
          	var somePromise = deferred.promise;
          	somePromise.then(function() {
            	console.log('Parent preLink');
              CONFIG = 1; // OVERRIDE!!
              // Compile child directive
              elem.append($compile(template)(scope));
            });
            
            deferred.resolve();
          	
          }
        }
    };
});

app.directive('child', function(CONFIG) {
    return {
        restrict: 'E',
        scope: {},
        link: {
        	pre: function(scope, elem, attrs) {
          	console.log('Child preLink');
            console.log('CONFIG:', CONFIG); // IT SHOULD BE 1
          }
        }
    };
});