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();
        });
      }
    }
});

这假设button和textarea元素共享同一个父元素。

工作插件http://plnkr.co/edit/MOHaiDU0zAqwgJEgIo1j?p=preview

在angularJS中创建选择所有文本按钮

1 个答案: