Javascript 角度：在替换的元素中保留光标位置

从高层来看：我继承了一些复杂的表单操作代码，其中有一个主要的可用性缺陷——编辑文本字段会在每次更改后将光标移动到输入文本的末尾

我看了一下哪个似乎很接近，但没有完全回答我的问题，因为所讨论的元素正在使用该模式

我很难想出如何结合这些方法。我不想更改输入的文本，只需确保光标不会四处移动即可

据我所知，在重新编译分部时会调用link函数，这在底层模型发生更改时发生，每次用户编辑字段时都会发生。我可以通过向includereplace的link函数添加一个事件处理程序来捕获光标位置，但该函数无法访问将被替换的元素

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

    }; 
});

虽然我已经不止一次地阅读了所有文档，但我对整个angular编译/链接生命周期的理解肯定不是很透彻。一个全面的流程图会很好…

而不是做：

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

---

希望这有帮助

出于我的目的，我只需要将

ng model options=“{updateOn:'blur'}”

添加到html中。这将防止模型在用户完成编辑之前更新和触发替换

对于scope.$watch，您正在“监视”元素值，它将在每次更改时触发下面的函数。我认为这会导致与另一种方式类似的问题，因为元素没有真正“更改”，而是被完全替换。基本上，watch函数在第一次创建后就不会启动，因为每次模型更改时，整个元素都会被替换。如果是那样的话，我不明白这个问题，很抱歉。不管怎样，如果你看模型而不是值会怎么样？这也行吗？我认为模型对光标位置一无所知