angularjs - 使用 AngularJS 在文本区域中插入符号的位置

Question

我问自己这样做是否正确。我遇到的问题是我想在 AngularJS 更新文本区域值后保留插入符位置。

HTML 看起来像这样:

<div ng-controlle="editorController">
    <button ng-click="addSomeTextAtTheEnd()">Add some text at the end</button>
    <textarea id="editor" ng-model="editor"></textarea>
</div>

我的 Controller 如下所示:

app.controller("editorController", function($scope, $timeout, $window) {

    $scope.editor = "";

    $scope.addSomeTextAtTheEnd = function() {
        $timeout(function() {
            $scope.editor = $scope.editor + " Period!";
        }, 5000);
    }

    $scope.$watch("editor", function editorListener() {

        var editor = $window.document.getElementById("editor");
        var start = editor.selectionStart;
        var end = editor.selectionEnd;

        $scope.$evalAsync(function() {
            editor.selectionStart = start;
            editor.selectionEnd = end;
        });

    });
});

假设我开始在文本区域中输入一些文本。然后我按下按钮，很快就会添加“句号!”在 $scope.editor 值的末尾。在 5 秒超时期间，我再次将焦点放在文本区域上并编写更多文本。 5 秒后，我的文本区域值被更新。

我正在观察 $scope.editor 值。 editorListener 将在每个 $digest 周期执行。在这个循环中还会发生双向数据绑定(bind)。我需要在数据绑定(bind)后立即纠正插入符位置。 $scope.$evalAsync(...) 是我应该执行此操作的正确位置吗？

Answer 1

这是我用来操纵插入符位置的指令；然而，正如我在评论中所说，IE 存在问题。

以下内容可能会帮助您制定计划。我在您的问题中注意到的一件事是，您提到了一种情况，即用户可以重新聚焦输入框以键入其他文本，我认为这会重置超时；这个条件是真的吗？

您是否愿意不使用按钮来添加文本，而是直接添加文本？就像每当用户从输入框中取消焦点时运行 addSomeTextAtTheEnd 函数一样？

如果您必须使用该按钮，并且用户重新将焦点放在输入框上并输入更多内容，您应该取消按钮超时。

喜欢:

    myVar = setTimeout(function(){ alert("Hello"); }, 3000);

    // Then clear the timeout in your $watch if there is any change to the input.
    clearTimeout(myVar);

如果您这样做，也许您甚至不需要知道光标位置，因为 addSomeTextAtTheEnd 函数超时将在 5 秒超时之前重置任何输入更改。如果发生 5 秒超时，则 addSomeTextAtTheEnd 将运行并“将文本附加到末尾”，就像它应该做的那样。请提供更多信息，我将根据需要进行更新。

app.directive('filterElement', ['$filter', function($filter){

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: '?ngModel', // ? checks for parent scope if one exists.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return }

      var conditional = attrs.rsFilterElement.conditional ? attrs.rsFilterElement.conditional : null;

      scope.$watch(attrs.ngModel, function(value){
        if( value == undefined || !attrs.rsFilterElement ){ return }

        // Initialize the following values
        // These values are used to set the cursor of the input.
        var initialCursorPosition = elem[0].selectionStart
        var initialValueLength = elem[0].value.length
        var difference = false

        // Sets ngModelView and ngViewValue
        ngModel.$setViewValue($filter( attrs.rsFilterElement )( value, conditional ));
        attrs.$$element[0].value = $filter( attrs.rsFilterElement )( value, conditional );

        if(elem[0].value.length > initialValueLength){ difference = true }
        if(elem[0].value.length < initialValueLength){ initialCursorPosition = initialCursorPosition - 1 }
        elem[0].selectionStart = difference ? elem[0].selectionStart : initialCursorPosition
        elem[0].selectionEnd = difference ? elem[0].selectionEnd : initialCursorPosition
      });
    } // end link
  } // end return
}]);