Angularjs directive to Insert text at textarea caret

Question

I have controller MyCtrl and directive myText. When a model in MyCtrl changes, I want to update the textarea of myText directive by inserting the text at current position / caret.

I tried to reuse the code from this Inserting a text where cursor is using Javascript/jquery

My Code: http://plnkr.co/edit/WfucIVbls2eekL8kUp7e

Here is my HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="MyCtrl">
      <input ng-model="someInput">
      <button ng-click="add()">Add</button>
      <p ng-repeat="item in items">Created {{ item }}</p>  
    </div>

    <textarea my-text="">

    </textarea>

  </body>

</html>

Javascript:

var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope, $rootScope) {
  $scope.items = [];

  $scope.add = function() {
    $scope.items.push($scope.someInput);
    $rootScope.$broadcast('add', $scope.someInput);
  }
});

app.directive('myText', ['$rootScope', function($rootScope) {
  return {
    link: function(scope, element, attrs) {
      $rootScope.$on('add', function(e, val) {
        console.log('on add');
        console.log(val);

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

      });
    }
  }
}])

It doesn't work now because element is not the DOM object. Here is the error:

TypeError: Object [object Object] has no method 'focus'

QUESTION: So my question is how to fix this? Or how to get the real DOM object from angular element object?

score 11 · Accepted Answer · answered Jan 28 '14 at 09:13

11

Try:

var domElement = element[0];

DEMO

answered Jan 28 '14 at 09:13

Khanh TO

48,509
13
99
115

Nice. How did I miss this..LOL – HP. Jan 28 '14 at 09:19
This code does not seem to be updating the scope, and when I try to call $apply I get "$digest already in progress"... How should I update the scope variable associated with this text area? – buzali Jun 29 '15 at 21:50
@buzali: that directive was designed to be like `readonly`. It does not make sense to use that to update the scope. For example, there is no information which model to update, it just listens to `add` event which could come from anywhere and just updates the text. – Khanh TO Jun 30 '15 at 12:44

score 5 · Answer 2 · answered Jan 28 '14 at 09:19

Short anwser:

element[0]

would give you the actual DOM Element.

Long answer:

angular.element always provides a jqLite selector, which is similiar to a result set given by a jQuery selection. It's a set of HTML elements.

The link function of a method gets called with the following params: scope, element, attrs and ctrl.

element is given as a set of the one DOM Element the directive is attached to. So the first item is the actual HTML Element.

I changed your code so that it should(?) work

Better answer than the accepted one. But the demo code doesn't insert the text at the current position/caret as asked. — MCollard, Aug 24 '16 at 09:01

Angularjs directive to Insert text at textarea caret

2 Answers2