Dynamic Directive Creation Test

For Robert

by simpulton

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Register a directive at a later point and time</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body ng-controller="GroundCtrl">
<div>
    <a href="" ng-click="addWidget()">Click Me!</a>
</div>
<div id="container"></div>
<script>
    var app = angular.module('app', []);
    app.controller('GroundCtrl', function ($scope, $compile) {
        console.log('Ground Control Initialized');
        $scope.addWidget = function () {
            var str = $('#myWidget').html();
            if (str) {
                var s = $scope.$new(); // create a new scope
                var el = $compile(str)(s); // compile against html
                $('#container').append(el); // append newly created element
            }
        };
    });
    // THIS WORKS
//    app.directive('uiMywidget', function () {
//        return {
//            link:function (scope, element, attrs) {
//                console.log('my widget invoked');
//            }
//        }
//    });

    setTimeout(function () {
        console.log('Registering Directive');
        // THIS DOES NOT WORK
        app.directive('uiMywidget', function () {
            return {
                link:function (scope, element, attrs) {
                    console.log('my widget invoked');
                }
            }
        });
    }, 1000);
</script>
<script id="myWidget" type="html/template">
    <div ui-mywidget>Hello, world!</div>
</script>
</body>
</html>