angularjs 复制自身html,angularjs - angular js zeroclipboard copy html - Stack Overflow

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:

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: ' {{innerText}} ',

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:

Pretty cool, isn't it? :D