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

10 浏览
0 Comments

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

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

我查看了这个问题，它似乎接近但并没有完全回答我的问题，因为相关元素正在使用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
        });
        }
    }; 
});

我对整个angular编译/链接生命周期并没有非常深入的理解，尽管我已经多次阅读了所有文档。一个全面的流程图会很好...

0

2 答案

0 Comments

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

有人在使用Angular时遇到了一个问题，就是在替换元素后无法保留光标的位置。他发现，只需要在HTML中添加ng-model-options="{ updateOn: 'blur' }"就可以解决这个问题。这样做的原因是，这个指令可以阻止模型的更新，直到用户完成编辑。

0
0 Comments

在这个问题中，出现的原因是在Angular中，当元素被替换时，无法保留光标位置。解决的方法是使用$scope.$watch来监听元素的值的变化，并在每次变化时执行相应的函数来保留光标位置。

具体的解决方法如下：

1. 首先，在指令中引入$timeout服务。

2. 使用$scope.$watch来监听元素的值的变化，并在每次变化时执行相应的函数。

3. 在函数中使用$timeout来延迟执行代码，以确保在DOM元素被替换后再执行相应的操作。

具体的代码如下：

scope.$watch(function () {
  return el.val();
}, function (value) {
  $timeout(function(){
    var cursorPosition = event.target.selectionEnd;
    console.log(cursorPosition); // 光标位置
    el.selectionEnd = cursorPosition; // 保留光标位置
  });
});

需要注意的是，在指令中需要引入$timeout服务。

希望这可以帮助你解决问题！

0