Angular copyToClipboard -
Simple copy to clipboard functionality in angular
without any 3rd party dependencies.
Stayed Informed - ng-cut, ng-copy, ng-paste Events
Stayed Informed - ng-cut, ng-copy, ng-paste Events
The
copyToClipboard module –
//angular provider - copyToClipboard
app.provider('$copyToClipboard', [function () {
this.$get = ['$q', '$window', function ($q, $window) {
var body = angular.element($window.document.body);
var textarea = angular.element('<textarea/>');
textarea.css({
position: 'fixed',
opacity: '0'
});
return {
copy: function (stringToCopy) {
var deferred = $q.defer();
deferred.notify("copying the text to clipboard");
textarea.val(stringToCopy);
body.append(textarea);
textarea[0].select();
try {
var successful = $window.document.execCommand('copy');
if (!successful) throw successful;
deferred.resolve(successful);
} catch (err) {
deferred.reject(err);
} finally {
textarea.remove();
}
return deferred.promise;
}
};
}];
}]);
Full
Example,
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
//angular controller - copyToClipController
app.controller('copyToClipController', ['$scope', '$rootScope', '$copyToClipboard', function ($scope, $rootScope, $copyToClipboard) {
var svm = $scope;
svm.userList = [
{ "name": "Anil Singh", "email": "aks@gmail.com", "phone": "9011213333", "address": "Noida, UP, India" },
{ "name": "Aradhya Singh", "email": "ara@gmail.com", "phone": "9013453363", "address": "GR. Noida, UP, India" }];
//copy user information
svm.copyUserToClipboard = function (e, user) {
let copyUserInfo = {
"Name": user.name,
"EmailId": user.email,
"Phone Number": user.phone,
"Full Address": user.address,
}
$copyToClipboard.copy(JSON.stringify(copyUserInfo))
.then(function () { });
}
//copy list of user information
svm.copyUsersToClipboard = function (e, users) {
var copyUsers = [];
angular.forEach(users, function (user, key) {
copyUsers.push({
"Name": user.name,
"EmailId": user.email,
"Phone Number": user.phone,
"Full Address": user.address,
});
}, copyUsers);
$copyToClipboard.copy(JSON.stringify(copyUsers))
.then(function () { });
}
}]);
//angular provider - copyToClipboard
app.provider('$copyToClipboard', [function () {
this.$get = ['$q', '$window', function ($q, $window) {
var body = angular.element($window.document.body);
var textarea = angular.element('<textarea/>');
textarea.css({
position: 'fixed',
opacity: '0'
});
return {
copy: function (stringToCopy) {
var deferred = $q.defer();
deferred.notify("copying the text to clipboard");
textarea.val(stringToCopy);
body.append(textarea);
textarea[0].select();
try {
var successful = $window.document.execCommand('copy');
if (!successful) throw successful;
deferred.resolve(successful);
} catch (err) {
deferred.reject(err);
} finally {
textarea.remove();
}
return deferred.promise;
}
};
}];
}]);
</script>
<body>
<div ng-app="myApp">
<div ng-controller="copyToClipController">
<div class="copy">
<a data-ng-click="copyUsersToClipboard($event, userList)" href="javascript:void(0)" title="Copy Users">Copy
User List</a>
<hr/>
</div>
<div class="copy" ng-repeat="user in userList">
<ul>
<span><a data-ng-click="copyUserToClipboard($event, user)" href="javascript:void(0)" title="Copy row">Copy
this</a></span>
<li>{{ user.name }}</li>
<li>{{ user.email }}</li>
<li>{{ user.phone }}</li>
<li>{{ user.address }}</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
