Einfügen von Text an aktuelle Cursorposition in TextArea mit AngularJs Ng-Click

Question

Wir versuchen, wie unten Anforderung zu implementieren. Klicken Sie auf eine Schaltfläche, um Text zu generieren, der dann in textarea eingefügt wird. Schaltfläche verwendet Ng-Onclick.

Tastencode ist unten.

Aber viele Tasten werden da sein, als ob 4 Komponenten hinzugefügt werden 4 Tasten werden da sein, um die Formel zu generieren.

und hier mein TextArea- Code:

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

und hier ist mein 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(); 
    } 

Wir können sehen, dass die in anderen Teil $ scope.vm.SummarisationForm + = so wird es + die nächste Formel vorherige so will ich diese ändern und muss den Inhalt hinzufügen, wo ich das bin halten Mauszeiger.

Nun, was auch immer ich klicke es ist es am Ende des Inhalts, Wenn Eingabe Taste Eingabe Cursor in der ersten Zeile der nächsten Zeile auch es ist es in der gleichen Zeile, die bereits Text ist so, so hinzuzufügen Ich möchte die Cursorposition finden und in den Text einfügen, wo der Cursor genau gehalten wird oder die Schlüsselposition eingegeben wird.

Ich bin sehr neu zu eckigen js so bitte helfen Sie mir mit Grundidee mit Button Wie kann ich implementieren und Skript-Änderung, wie kann ich es tun.?

Edit: Es ist ASP.NET MVC5 Applikaiton.

Wenn Sie weitere Details benötigen, lassen Sie es mich bitte wissen.

Vielen Dank im Voraus an alle.

Answer 1

Hier ist der Held, der meine Probleme gelöst wurde. Wer auch immer es ist wirklich toll, dass er mein Problem gelöst hat.

und was genau getan ist ich erstellt Direktive Element wie in diesem Link erwähnt und nannte diese Richtlinie aus meiner Sicht.

Boom hat funktioniert.

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

Ansicht wie dieser Aufruf ist

Richtlinie Name, myText.