jquery - 在angularJS中创建一个全选文本按钮

Question

我四处寻找答案，但没有找到任何与此直接相关的内容。

在一个模型中，我有一个禁用/只读文本区域，以及一个用于选择其中所有文本的按钮(用户可以随后复制 - 如果有人知道如何制作复制功能以及选择按钮，那会很整洁)。

但是，当单击按钮时，虽然它看起来像是选择了所有文本区域文本，但它只是选择了文本区域元素。当您复制和粘贴文本时，剪贴板中没有任何可用内容。

相关代码如下:

$scope.selectAll = function() {
  var selection = $window.getSelection();
  var range = document.createRange();
  var text = angular.element('textarea');
  range.selectNodeContents(text[0]);
  selection.removeAllRanges();
  selection.addRange(range);
};

在 HTML 中:

<div class="modal-footer">
  <button class="btn btn-default" data-ng-click="selectAll()">Select All</button>
<button class="btn btn-warning" data-ng-click="close()">Close</button>
</div>

Answer 1

创建指令并使用textarea.select()方法

像这样

angular.module('myApp.directives', []).
  directive('selectAll', function() {
    return {
      restrict: 'A',
      scope: {},
      link: function (scope,elem,attr) {
        var textarea = elem.parent().find("textarea")[0];
        elem.bind('click', function() {
          textarea.select();
        });
      }
    }
});

这假定按钮和文本区域元素共享相同的父元素。

工作节奏 http://plnkr.co/edit/MOHaiDU0zAqwgJEgIo1j?p=preview