Angularjs directive to Insert text at textarea caret
angularjs, dom, html, javascript, jquery
Solution
Try:
var domElement = element[0];
DEMO
Problem
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?