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?
2 answers
solution1
11 ACCPTED 2014-01-28 09:13:23
solution2
5 2014-01-28 09:19:57
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.