Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="FormCtrl">
<input type="text" ng-model="outputs.name.value"> <br />
Name: {{outputs.name.value}}!
<br />
<br />
Outputs: {{outputs}} <br />
<br />
<br />
<markdown>Name: {{outputs.name.value}}</markdown>
<markdown>City: {{outputs.city.value}}</markdown>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.factory('Outputs', function() {
return {};
});
myApp.factory('Inputs', function() {
return {};
});
function FormCtrl($scope, Outputs, orderByFilter) {
$scope.outputs = Outputs;
$scope.outputs = {
"name": {
value: "John",
},
"city": {
value: "London",
}
}
};
myApp.directive('markdown', function ($compile, Inputs, Outputs) {
var editTemplate = '<div class="well" style="padding-top:0" ng-show="isEditMode">' +
'<textarea style="width:98%; height: auto" rows=5 ng-model="markdown"></textarea><br />' +
'<button ng-click="switchToPreview(); save()" class="btn btn-success btn-mini">Show</button> ' +
'<button ng-click="switchToPreview()" class="btn btn-danger btn-mini">Cancel</button>' +
'</div>';
var previewTemplate = '<div ng-hide="isEditMode" ng-dblclick="switchToEdit()" >{{markdown}}</div>';
return{
restrict: 'E',
scope: {},
controller: 'FormCtrl',
compile:function (tElement, tAttrs, transclude) {
var markdown = tElement.html();
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 () {
scope.isEditMode = false;
};
scope.save = function() {
previewElement.html(scope.markdown);
$compile(element.contents())(scope);
};
scope.switchToEdit = function() {
scope.isEditMode = true;
};
scope.$watch(
function(scope) {
// /return...