Angularjs Bootstrap Pagedown

by Bhesh Gurung

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/kennyki/angular-pagedown/master/angular-pagedown.min.css">
<script src="https://rawgit.com/ujifgc/pagedown/master/Markdown.Converter.js"></script>
<script src="https://rawgit.com/ujifgc/pagedown/master/Markdown.Sanitizer.js"></script>
<script src="https://rawgit.com/jmcmanus/pagedown-extra/master/Markdown.Extra.js"></script>
<script src="https://rawgit.com/ujifgc/pagedown/master/Markdown.Editor.js"></script>
<script src="https://rawgit.com/kennyki/angular-pagedown/master/angular-pagedown.js"></script>
<body ng-app="discussion" ng-controller="DiscussionCtrl">
    <hr />
    <div>
        <editable ng-model="name" />
    </div>
</body>

CSS

* {
    font-family: FontAwesome;
    font-size: 14px !important;
}
body {
    padding: 10px;
}
.container, .title-container, .wmd-viewer-container {
    border: 1px solid #eee;
}
.title-container, .wmd-viewer-container {
    margin: 5px;
}

JavaScript

angular.module('discussion',[])
    .directive('editable', function() {
    var editTemplate = '<input type="text" ng-model="inputValue" ng-show="inEditMode" ng-dblclick="switchToViewMode()" class="form-control input-sm">';
    var viewTemplate = '<div ng-hide="inEditMode" ng-dblclick="switchToEditMode()">{{ value }}</div>';
    return {
        restrict: 'E',
        scope: {
            value: '=ngModel',
            bindAttr: '='
        },
        controller: function($scope) {
            $scope.inputValue = $scope.value;
        },
        replace: true,
        compile: function(tElement, tAttrs, transclude) {
            tElement.html(editTemplate);
            tElement.append(viewTemplate);

            return function(scope, element, attrs) {
                scope.inEditMode = false;

                scope.switchToViewMode = function() {
                    scope.inEditMode = false;
                    scope.value = scope.inputValue;
                }
                scope.switchToEditMode = function() {
                    scope.inEditMode = true;
                }
                scope.toggleMode = function() {
                    scope.inEditMode = !scope.inEditMode;
                }

                element.bind("keydown keypress", function(event) {
                    if (event.keyCode === 13) {
                        scope.$apply(function() {
                            scope.switchToViewMode();
                        });
                    }
                });
            }
        }
    }
})
.controller("DiscussionCtrl", function($scope) {
    $scope.value = "test name";
});;