ngclipboard-Angular复制到剪贴板

作者:高天阳

邮箱:[email protected]

更改历史

* 2017-11-26    高天阳    初始化文档

1 简介、特点

1.1 简介

ngclipboard使用angularjs指令将文本复制到剪贴板而不使用flash

1.2 特点

复制文本到剪贴板应该不难。它不需要几十个步骤来配置或加载数百个KB。但最重要的是,它不应该依赖于Flash或任何臃肿的框架。

2 安装、使用

2.1 安装

  • Npm安装
npm install ngclipboard --save
  • Bower安装
bower install ngclipboard --save

2.2 引入依赖

var myApp = angular.module('app', ['ngclipboard']);

2.3 使用

  • 可是使用id来加载标签里面的内容
data-clipboard-target="#foo"

示例:

<!-- Target -->
<input id="foo" value="https://github.com/sachinchoolur/ngclipboard.git">

<!-- Trigger -->
<button class="btn" ngclipboard data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

  • 也可以获取值
data-clipboard-text=""

示例:

<input type="text" ng-model="$ctrl.copyText" />
<button class="btn btn-primary" uib-tooltip="复制成功" tooltip-popup-close-delay='1000' tooltip-trigger="'focus'" ngclipboard data-clipboard-text='{{$ctrl.copyText}}'>
    复制
</button>

参考资料

results matching ""

    No results matching ""