Angular: Angular Code Output and Source

by Michael Hunziker

HTML

<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<h1>Some Angular Code</h1>
<script-preview><p>Test: {{'Hello'+' World!'}}</p></script-preview>

JavaScript

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

myApp.directive('scriptPreview', function () {
        return {
            restrict: 'E',
            template: '<div><fieldset><legend>Output</legend><div class="output"></div></fieldset><fieldset><legend>Source</legend><div class="source"></div></fieldset></div>',
            replace: true,
            transclude: true,
            
            compile: function(elem, attr, transclude) {
                transclude(elem, function(clone) {

                    // Content of script-preview element
                    var content = clone[0].textContent;

                    // Write output
                    elem.find('div.output').append(content);

                    // Write source
                    elem.find('div.source').append('Source should be displayed here');


                });
            }            


        };
    });