使用AngularJs Ng-Click在Textarea中的当前光标位置插入文本

Question

我们正在尝试实现以下要求。单击一个按钮，将生成一些文本，并将其添加到文本区域。按钮正在使用Ng-Onclick。

按钮代码如下。

<input type="submit" value="Add to form" class="btn btn-primary" ng-click="addToFormID($index)" />

但是会出现许多按钮，例如，如果要添加4个组件，则会有4个按钮来生成公式。

这是我的TextArea代码：

 <textarea id="summarFormula" ng-model=".Summarisation" ng-change="setSummarisationFormulaDynamic()" cols="100" rows="4"></textarea>

这是我的剧本。

    $scope.addToFormID = function(index){
        if( $scope.vm.SummarisationForm==null)
        {
            $scope.vm.SummarisationForm ="["+ $scope.vm.Dependencies[index].NeName+":{"+$scope.vm.Dependencies[index].DbId+","+$scope.vm.Dependencies[index].VersionId+"}]";

        }else
            $scope.vm.Summarisation+="["+ $scope.vm.Dependencies[index].Name+":{"+$scope.vm.Dependencies[index].Id+","+$scope.vm.Dependencies[index].VersionId+"}]";
        $scope.setSummarisationFormDynamic();
    }

我们可以在$ scope.vm.SummarisationForm + =的其他部分看到，因此它将+ +下一个公式添加到上一个公式中，因此我想修改此公式，并需要在光标所在的位置添加内容。

现在，无论我单击什么，都将其添加到内容的末尾，如果要输入回车键，将光标保持在下一行的第一行，它也会将其添加到已经有文本的同一行中，因此我想找到光标位置，然后将其插入文本，精确地保持光标位置或输入Enter键位置。

我对angular js非常陌生，因此请使用按钮的基本概念帮助我，如何实现和修改脚本。

编辑：这是ASP.NET MVC5应用程序。

如果您需要更多详细信息，请告诉我。

在此先感谢所有人。

Answer 1

这是我的问题已解决的英雄。谁能解决我的问题真是太好了。

确切的是，我创建了此链接中提到的指令元素，并在我的视图中调用了该指令。

繁荣它的工作。

http://plnkr.co/edit/Xx1SHwQI2t6ji31COneO?p=preview

app.directive('myText', ['$rootScope', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            $rootScope.$on('add', function(e, val) {
                var domElement = element[0];

                if (document.selection) {
                    domElement.focus();
                    var sel = document.selection.createRange();
                    sel.text = val;
                    domElement.focus();
                } else if (domElement.selectionStart || domElement.selectionStart === 0) {
                    var startPos = domElement.selectionStart;
                    var endPos = domElement.selectionEnd;
                    var scrollTop = domElement.scrollTop;
                    domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
                    domElement.focus();
                    domElement.selectionStart = startPos + val.length;
                    domElement.selectionEnd = startPos + val.length;
                    domElement.scrollTop = scrollTop;
                } else {
                    domElement.value += val;
                    domElement.focus();
                }
            });
        }
    }
}]);

查看这样的通话，

指令名称是myText。因此代码将类似于此视图。

 <textarea my-text="">