Inserting text at Current Cursor position in Textarea Using AngularJs Ng-Click

angularjs, html, javascript

Solution

Here is the hero which my issues was resolved. Who ever it is really great that he solved my problem.

and What exactly done is I created directive element as mentioned in this link and called that directive in my view .

Boom it worked.

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

View Calling like this,

directive name is , myText. so the code will be like in this view side.

 <textarea my-text="">

Problem

We are trying to implement like below requirement. Click of a button some text will be generated and it will be added into textarea. Button is using Ng-Onclick. Button Code is below. ``` <input type="submit" value="Add to form" class="btn btn-primary" ng-click="addToFormID($index)" /> ``` But many buttons will be there like if am adding 4 components 4 buttons will be there to generate the formula. and Here is my TextArea Code: ``` <textarea id="summarFormula" ng-model=".Summarisation" ng-change="setSummarisationFormulaDynamic()" cols="100" rows="4"></textarea> ``` and Here is my Script. ``` $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(); } ``` We can see that in else part $scope.vm.SummarisationForm += so it will + the next formula to previous one so i wants to modify this one and needs to add the content where i am keeping the cursor. Now What ever I am clicking it is adding it to the end of the content , If am entering enter key keeping cursor into first line of the next line also it is adding it to the same line which already text is there so i wants to find the cursor position and insert into the text where exactly keeping cursor or entering enter key position. I am very new to angular js so please help me with basic idea with button how can i implement and script modification how can i do it.? Edit : It is ASP.NET MVC5 Applicaiton. If you need further more details please let me know. Thanks in advance to all.

Original source