Question

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

我尝试重用此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'

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

Answer 1

尝试：

var domElement = element[0];

DEMO

Answer 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

Angularjs指令在textarea插入符号中插入文本

2 个答案: