JSFiddle - React, Tailwind, and code Playground

by Vincent Dagpin

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-app="TempApp">
    <div ng-controller="TempController" ng-init="Init()">
        Welcome to <b>{{ Company.Info.Name }}</b> Company <br /> <br />
        <label nxmodel="Data" nx-editable-label></label> <br />
        <label nxmodel="Company.Info.Name" nx-editable-label></label>
        <br /><br /> 
        <button ng-click="Save()">Save</button>
    </div>
</div>

JavaScript

var app = angular.module('TempApp', []);

function TempController($scope)
{
    $scope.Data = 'Click me to edit';
    $scope.Company = null;
    
    $scope.Init = function()
    {
        $scope.Company = 
            {
                ID: 1,
                Info: { Name: 'Alien' }
            };
    }
    
    $scope.Save = function()
    {
         alert($scope.Data);
    }
}

app.directive('nxEditableLabel', function ($compile) {
     return {
        restrict: 'EA',
        scope: false,
        link: function(scope, element, attrs) {
            $(element).addClass('nx-editable-lbl');
            
            var modelName = $(element).attr('nxmodel');                                    
            
            $(element).text(retrieveValueFromNS(scope,modelName));
            
            $(element).click(elemClick);
            
            
            function retrieveValueFromNS(sourceObj, nsName)
            {
                var a = nsName.split('.');
                var c = a.length;
                var leftSide = a[0];    
                var y = a.reverse();
                y.pop();
                y.reverse();
                var z = y.join('.');
                
                if(c > 1)    
                    return retrieveValueFromNS(sourceObj[leftSide], z)    
                else    
                    return sourceObj[nsName];    
            }
            
            
            function elemClick()
            {
                var txt = $(element).text();
                var inputBox = $('<input class="nx-editable-input" ng-model="' + modelName + '" />');
                inputBox.val(txt);                
                
                inputBox.keypress(function(e) {
                    if (e.keyCode === 13)
                    {
                        var newElem = $(element).click(elemClick);
                        $(element).text(retrieveValueFromNS(scope,modelName));
                        inputBox.replaceWith(newElem);
  ...