javascript - 如何以 Angular 更新指令中的数据

Question

我有对象数组:

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
        }];
    }]);

我是这样填充到 View 中的:

<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>

双击时调用的指令:

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');
            };
        }
    };
});

这里有两个问题:

1. 当我双击并更改数字并离开输入框(模糊)时，它应该更新 View (span 标签文本)。

2. 只有一个单元格应该处于编辑模式，但是当我尝试双击其他单元格时，之前的单元格仍处于编辑模式

对于第一个问题，我尝试使用无效的 onblur 设置 elem.value = (input[0].value);。

我该如何解决这个问题？

更新:

使用 elem.text(input[0].value); 解决了第一个问题。我如何修复第二个？另外，我是指令的新手，我的代码可以改进吗？

Answer 1

1) 您使用 elem[0].innerText 获取上一个值，因此使用相同的方式存储新值:elem[0].innerText = input[0].value ;

2) 您可以向输入添加一些dummy 类，然后双击删除所有输入:

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

和 elem.bind('dblclick', function () {}

添加:

      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