JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<label inline-edit>Edit me</label>

JavaScript

'use strict';
var app = angular.module('myApp', []);
app.directive('inlineEdit', function() {
	return{
		restrict: 'A',
		transclude: true,
		template: '<label class="editing" data-ng-transclude></label>',
		controller: ['$scope','$element','$transclude',function($scope, $element, $transclude) {
			$transclude(function(clone) {
				$scope.transcluded_content = clone[0].textContent;
			});
			$element.bind('click', function(){
				$element.hide().after('<input type="text" value="'+$scope.transcluded_content+'" />');
                
				$element.next().focus().blur(function (){
					$scope.transcluded_content = $element.next().val();
					$element.html($scope.transcluded_content);
					$element.next().hide();
					$element.show();
				});
			});
			
		}]
	};
});