angular js zeroclipboard copy html

Question

I'm trying to make a Copy button for an html link. I would like the user to click on the button and the html is loaded (as 'text/html') and when paste into an email or Word document, it is rendered as an HTML link and not a full text link.

i.e. I want to show mywebsite.com rather than

<a href=http://www.mywebsite.com>mywebsite.com</a>

when copied.

I'm using angular JS and Zeroclipboard (angular-zeroclipboard.js) Here is my code: controller.js

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

app.config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
// config ZeroClipboard
uiZeroclipConfigProvider.setZcConf({
  swfPath: 'assets/javascripts/vendor/ZeroClipboard.swf'
});
}]);

My HTML file:

 <button ng-show="!copiedHTML" class="btn btn-SwBLUE space hidden-xs" ui-zeroclip zeroclip-copied="copiedHTML=true" zeroclip-on-error="clipError($event)" zeroclip-text="<a href='http://www.mywebsite.com/page_id=3'>http://www.mywebsite.com</a>"><span class="glyphicon glyphicon-duplicate"></span> Copy HTML Text</button>

 <script src="javascripts/vendor/ZeroClipboard.js"></script>
<script src="javascripts/vendor/angular-zeroclipboard.js"></script>

Any idea how to set the MIME type of the copied text? Thanks a lot!

Answer 1

Ok, finally got it using ng-clip. It this script I use the same directive to copy plain text and HTML text. I set a mime-type in the directive tag. These buttons are turning green with an OK glyph (using bootstrap) for 2 seconds and go back to normal afterwards. It goes like this:

Add the JS to you HTML file:

<script src="javascripts/vendor/ZeroClipboard.js"></script>
<script src="javascripts/vendor/ng-clip.min.js"></script>

adding a directive to your JS controller:

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

[...]   

app.directive('copyButton', function ($timeout) {
    return {
        restrict: "E",
        scope: {
                    content: '@',
                    mimeType: '@',
                    innerText: '@',
                    class: '@'
                },
        template: '<button type="button" class="btn btn-SwBLUE space hidden-xs" clip-copy="content" clip-click="clipped()" data-clip-copy-mime-type="{{mimeType}}"><i class="glyphicon glyphicon-duplicate"></i> {{innerText}} </button>',
        link: function ($scope, element, attrs) {
            if(!$scope.mimeType){
                $scope.mimeType = "text/plain";
                $scope.innerText = "Copy TEXT "
            }else {
                $scope.innerText = "Copy HTML"
            }

            var toggleButton = function(element){
                angular.element(element.find('button')[0]).toggleClass("btn-SwBLUE");
                angular.element(element.find('button')[0]).toggleClass("btn-success");
                angular.element(element.find('i')[0]).toggleClass("glyphicon-duplicate");
                angular.element(element.find('i')[0]).toggleClass("glyphicon-ok");
            };

            $scope.clipped = function(){
                toggleButton(element);
                $timeout(function(){ toggleButton(element); }, 2000);
            };
        }
    };
});

And using it in my HTML:

<copy-button class="hidden-xxs" content="<a href=www.mywebsite.com?page=321>mywebsite.com</a>" mime-type="text/html"></copy-button>

Pretty cool, isn't it? :D