Angularjs指令在Textarea Caret插入文本

我有控制器MyCtrl和指令myText。当MyCtrl中的模型更改时，我想通过在当前位置/caret中插入文本来更新myText指令的textarea。

我试图从此插入光标正在使用JavaScript/jquery

的文本中重复使用代码

我的代码：http：//plnkr.co/edit/wfucivbls2eekl8kup7e

这是我的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();
        }
      });
    }
  }
}])

现在不起作用，因为element不是DOM对象。这是错误：

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

问题：所以我的问题是如何解决此问题？或如何从Angular Element Object获取真实 dom对象？

尝试：

var domElement = element[0];

demo

简短anwser：

element[0]

会给您实际的DOM元素。

长答案：

angular.element始终提供一个jqLite选择器，该选择器与jQuery选择给出的结果集相似。这是一组HTML元素。

使用以下参数调用方法的link函数：scope，element，attrs和ctrl。

element作为指令所附加的一个dom元素的一组。因此，第一个项目是实际的HTML元素。

我更改了您的代码，以便它（？）工作

相关内容

最新更新

热门标签：