Question

从高层次开始：我继承了一些具有重大可用性错误的复杂表单操作代码 - 编辑文本字段会在每次更改后将光标移动到输入文本的末尾。

我看了this question这似乎很接近，但没有完全回答我的问题，因为有问题的元素正在使用include-replace模式。

我很难弄清楚如何结合这些方法。我不想更改输入的文本，只需确保光标不会跳转。

据我所知，当重新编译部分时会调用链接函数，只要发生对基础模型的更改，就会发生这种情况，每次用户编辑字段时都会发生这种情况。我可以通过向include-replace的链接函数添加事件处理程序来捕获游标位置，但是这不能访问将要交换的元素。

myModule.directive('includeReplace', function () {
return {
    require: 'ngInclude',
    restrict: 'A', /* optional */
    link: function (scope, el, attrs) {
        el.replaceWith(el.children());

        el.on('change', function(event){
         var cursorPosition = event.target.selectionEnd;
         console.log(cursorPosition); // where I expect it
         el.selectionEnd; = cursorPosition; // but obviously this don't work
        });
        }

    }; 
});

我绝对没有对整个角度编译/链接生命周期的超强把握，尽管我已经多次阅读了所有文档。一个全面的流程图会很好......

Answer 1

相反做：

el.on('change', function(event){
         var cursorPosition = event.target.selectionEnd;
         console.log(cursorPosition); // where I expect it
         el.selectionEnd; = cursorPosition; // but obviously this don't work
        });
        }

做什么：

scope.$watch(function () {
  return el.val();
}, function (value) {
  $timeout(function(){
    var cursorPosition = event.target.selectionEnd;
    console.log(cursorPosition); // where I expect it
    el.selectionEnd = cursorPosition;
  });
});

不要忘记在你的指令中加入$timeout。

希望这有帮助！

Answer 2

嗯，就我的目的而言，事实证明我只需要将ng-model-options="{ updateOn: 'blur' }"添加到html中。这可以防止模型更新并触发替换，直到用户完成编辑。

Angular：保留替换元素中的光标位置

2 个答案: