Custom Components - Part 2

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.min.js"></script>
<script src="https://raw.github.com/coreyti/showdown/master/compressed/showdown.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<jl-markdown>
## Double click me to switch to preview mode

### The rest of this markdown is just sample text:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Fusce at ligula at purus eleifend sagittis sit amet vitae nisl.
3. Visit `http://angularjs.org` to learn more!
</jl-markdown>
<textarea ng-model="txt"></textarea>

JavaScript

angular.module('myApp', [])
    .directive('jlMarkdown', function () {
        var converter = new Showdown.converter();
        var editTemplate = '<textarea ng-show="isEditMode" ng-dblclick="switchToPreview()" rows="10" cols="10" ng-model="markdown"></textarea>';
        var previewTemplate = '<div ng-hide="isEditMode" ng-dblclick="switchToEdit()">Preview</div>';
        return{
            restrict:'E',
            scope:{},
            compile:function (tElement, tAttrs, transclude) {
                var markdown = tElement.text();

                tElement.html(editTemplate);
                var previewElement = angular.element(previewTemplate);
                tElement.append(previewElement);

                return function (scope, element, attrs) {
                    scope.isEditMode = true;
                    scope.markdown = markdown;

                    scope.switchToPreview = function () {
                        var makeHtml = converter.makeHtml(scope.markdown);
                        previewElement.html(makeHtml);
                        scope.isEditMode = false;
                    }
                    scope.switchToEdit = function () {
                        scope.isEditMode = true;
                    }
                }
            }
        }
    });