javascript - AngularJS - ngRepeat。 ng-repeat 重新渲染后需要保持关注同一元素事件

Question

我有一个包含三个输入的列表，用户可以通过按位于其左侧的红叉来删除每个输入。当用户删除一个输入时，下一个输入将成为焦点，并且选定的复选框将被删除。到目前为止一切都很好。删除元素后，ng-repeat 循环会迭代更新的模型，并且我失去了元素焦点。有什么办法可以防止这种情况发生吗？

非常感谢

吉列尔莫

PD:包括指令代码以防万一。

directive('checkEmptyInput', function ($timeout,$q) {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if(!ngModel) return; //do nothing if no ng-model

            var idx = scope.$index,
                array = [],
                fieldIsValid = false;



            element.on('keyup', function () {


                switch (attrs.checkEmptyInput) {
                    case "method":
                        array = scope.album.tracks;

                        fieldIsValid = scope.ngAlbumForm.track.$valid;
                    break;
                }

                if(array[idx].name && array[idx].name != "" && fieldIsValid) {
                    array[idx].active = true;
                } else {
                    array[idx].active = false;


                    if(scope.elementHasId(array[idx])){
                        scope.deleteKeyFromCombinationsCodes(array[idx].id);
                    }
                };

                if (array[idx].name == "") {

                    //Previous to delete focus the next element
                    $timeout(function () {
                        var nextElem = element.parent().next().find('input')[0];

                        if(nextElem !== undefined) {

                            if(!scope.$last) {

                                //Delete the element
                                console.log("Deleting from inside the directive...");
                                nextElem.focus();                                   
                                scope.$emit("deleteArrayElement", [idx]);

                            }

                        }

                    });

                }

            });

        }
    }
})

HTML:

                    <div ng-repeat="track in album.tracks">
                        <input check-empty-input="track" type="text" ng-change="addInputText($index,$last,track.name,album.tracks;" ng-minlength="3" class="album_tracks" ng-model="track.name" ng-unique="track"/><button type="button"/>
                        <i class="remove-icon"></i>
                        </button>
                    </div>

骗子:http://plnkr.co/edit/BRN9csBcxHp5QU96NKq9?p=info

Answer 1

啊，我明白了。 ng-repeat 重复使用元素，并且您在初始链接期间选择索引。如果您在 keyup 处理程序中设置 idx ，它就会起作用。 (PLNKR)

element.on('keyup', function () {
    idx = scope.$index;