JSFiddle - React, Tailwind, and code Playground

by honzajde

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<div ng-app="bla">
<div ng-controller="ContactsCtrl">
<h4>Contacts</h4>
<ul>
    <li ng-repeat="contact in contacts">
        <span edit-in-place="editMode" ng-bind="contact.number"></span>
        <span edit-in-place="editMode" ng-bind="contact.name"></span>
        <span id="{{$index}}" ng-click="edit($index)"><i class="icon-edit">CLICKtoEDIT</i></span>
    </li>
</ul>
</div></div>

JavaScript

angular.module('bla', [])
    .directive('editInPlace', ['$parse','$compile', function($parse, $compile) {
    return {
        restrict: 'A',
        scope: true,
//        scope: {
//           contact:'='
//        },
        link: function (scope, element, attribs) {
            var inputStart = '<input style="border: 2 solid black" name="inPlaceInput" style="display:none" value="';
            var inputEnd = '">';

            scope.editModeAccessor = $parse(attribs.editInPlace);
            scope.modelAccessor = $parse(attribs.ngBind);

            scope.$watch(attribs.editInPlace, function(newValue, oldValue){
                if (newValue){
                    console.debug("click");
                    console.debug("value: " + scope.modelAccessor(scope));
                    var inputHtml = inputStart + scope.modelAccessor(scope) + inputEnd;
                    element.after(inputHtml);
                    jQuery(element).hide();
                    scope.inputElement = jQuery("input[name=inPlaceInput]");
                    scope.inputElement.show();
                    scope.inputElement.focus();
                    scope.inputElement.bind("blur", function() {
                        blur();
                    });
                } else {
                    blur();
                }
            });

            function blur(){
                console.debug("blur secondary");
                if (scope.inputElement){
                    console.debug("blur secondary inputElement found");
                    var value = scope.inputElement.val();
                    console.debug("input value: "+ value);
                    scope.inputElement.remove();
                    jQuery(element).show();
                    scope.editModeAccessor.assign(scope, false);
                    scope.modelAccessor.assign(scope, value);
                }
            }
        }
    }
                            }]);

function ContactsCtrl($scope, $timeout){
   ...