Angularjs 指令在 textarea 插入符号处插入文本答案

【问题标题】：Angularjs directive to Insert text at textarea caretAngularjs 指令在 textarea 插入符号处插入文本
【发布时间】：2014-02-19 11:35:22
【问题描述】：

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

我试图重用来自 Inserting a text where cursor is using 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'

问题：所以我的问题是如何解决这个问题？或者如何从角度元素对象中获取real DOM 对象？

【问题讨论】：

标签： javascript jquery html angularjs dom

【解决方案1】：

试试：

var domElement = element[0];

DEMO

【讨论】：

不错。我怎么会错过这个..LOL
这段代码似乎没有更新范围，当我尝试调用 $apply 我得到“$digest 已经在进行中”...我应该如何更新与此文本关联的范围变量地区？
@buzali：该指令的设计类似于readonly。使用它来更新范围是没有意义的。例如，没有更新哪个模型的信息，它只是侦听可能来自任何地方的add 事件并更新文本。

【解决方案2】：

简短回答：

element[0]

会给你实际的 DOM 元素。

长答案：

angular.element 总是提供一个jqLite 选择器，它类似于由 jQuery 选择给出的结果集。它是一组 HTML 元素。

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

element 作为指令附加到的一个 DOM 元素的集合给出。所以第一项是实际的 HTML 元素。

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

【讨论】：

比接受的答案更好。但是演示代码没有按照要求在当前位置/插入符号插入文本。