ng-copix's Introduction

ngCopix - Copy to clipboard using AngularJS (without flash)

An AngularJS directive that uses native execCommand and updates the user's clipboard without any kind of Flash. Only the latest browsers support Selection API and Clipboard API.

How to get it?

Manual Download from GitHub

Download the compressed package from here.

Bower

bower install ng-copix --save

Support

IE 10+
Chrome 43+
Firefox 41+
Opera 29+

Usage

Add ng-copix-min.js to your html file (index.html)

<script src="bower_components/angular/angular.min.js"></script>

Set ngCopixboard as a dependency in your module(s)

var sampleApp = angular.module('sampleApp', ['ngCopixboard'])

Add copix-range directive to the wanted element, example:

<button copix-range="valueToCopy">Copy</button>

<a href="" copix-range="valueToCopy">Copy</a>

You can optionally provide a fallback function that gets called if query commands are unavailable:

<a href="" copix-range="valueToCopy" copix-fallback="fallback(copy)">Copy</a>

If the fallback function is defined to accept an argument named copy, that argument will be populated with the text to copy. For example:

  sampleApp.controller('sampleController', function ($scope) {
    //...
    $scope.fallback = function(copy) {
      window.prompt('Press ctrl+c to copy the text below.', copy);
    };
  });

You can also optionally provide a function that gets called if query commands are working and the copy was successful. For example a basic success message:

<a href="" copix-range="valueToCopy" copix-after-copied="showFriendlyMessage()">Copy</a>

Controller:

  sampleApp.controller('sampleController', function ($scope) {
    //...
    $scope.showFriendlyMessage = function() {
      alert('Successfully copied to the clipboard!');
    };
  });