How to update the data from directive in angular

Question

I have array of objects:

app.controller('task2Controller', ['$scope','$http','task2Service', function ($scope, $http, task2Service) {

    $scope.rows = 
        [{
            num1: 56,
            num2: 78,
            num3: 89
        }, {
            num1: 56,
            num2: 78,
            num3: 89
        }, {
            num1: 56,
            num2: 78,
            num3: 89
        }, {
            num1: 56,
            num2: 78,
            num3: 89
        }];
    }]);

Which I am populating into view like this:

<div class="container" id="main" ng-controller="task2Controller">
    <div id="structure">
        <table border='1|1'>
            <tr ng-repeat="item in rows">
                <td>
                    <span id="{{item.num1}}{{$index}}" table-directive>{{item.num1}}</span>
                </td>
                <td>
                    <span id="{{item.num2}}{{$index}}"  table-directive>{{item.num2}}</span>
                </td>
                <td>
                    <span id="{{item.num3}}{{$index}}" table-directive>{{item.num3}}</span>
                </td>
            </tr>
        </table>
    </div>
</div>

Directive called on double click:

app.directive('tableDirective', function ($compile) {
    return {
        restrict: 'AEM',
        scope: {},

        link: function (scope, elem, attrs) {

            var input;

            elem.bind('dblclick', function () {
                input = $compile('<input type="text" ng-blur=doneEditing() autofocus value='+elem[0].innerText+'>')(scope);
                elem.css('display', 'none');
                elem.parent().append(input);
            });

            scope.doneEditing = function (item) {
                console.log('done editing ', input[0].value);
                elem.value = (input[0].value);
                input.remove();
                elem.css('display', 'block');
            };
        }
    };
});

There are two problems here:

1. When I double click and change the number and leave the inputbox(on blur), it should update the view(span tag text).

2. Only one cell should be in edit mode, but when I try to double click on other cells, the previous cells are still in edit mode

For the first problem, I tried setting elem.value = (input[0].value); using onblur which didn't work.

How do I fix this?

Update:

Using elem.text(input[0].value); fixed the first problem. How do I fix the second one? Also, I am new to directives, can my code be improved?

Answer 1

1) You used elem[0].innerText to fetch prev value, so use the same way to store new: elem[0].innerText = input[0].value;

2) You can add some dummy class to inputs and on double click remove all inputs:

input = $compile('<input type="text" class="dummy"  ng-blur=doneEditing() autofocus value='+elem[0].innerText+'>')(scope);

and inside elem.bind('dblclick', function () {}

add:

      var elementsToRemove = document.querySelectorAll(".dummy");
          for(var i = 0; i < elementsToRemove.length; i++) {
             var theSpan = elementsToRemove[i].parentNode.querySelector('span');
             if(theSpan){
               theSpan.style.display = 'block';
             }
             elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]);
            }

Demo Plunker