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 />
        <editable ng-model="name" />
</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() {
    	console.log("directive .......................................");
        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',
            template: viewTemplate + editTemplate,
            scope: {
                value: '=ngModel',
                bindAttr: '='
            },
            controller: function($scope) {
                $scope.inputValue = $scope.value;
            },        
            link: 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";
});;