モーダルのすべてのコンテンツをコピーし、メモ帳に貼り付けることができるコピー機能を備えたコピーボタンを作成する方法はありますか
コピーするテキストは動的であるため、Controller
にこの機能が必要でした。これは ngClipboard モジュールのコードに基づく単純な関数です。
function share() {
var text_to_share = "hello world";
// create temp element
var copyElement = document.createElement("span");
copyElement.appendChild(document.createTextNode(text_to_share));
copyElement.id = 'tempCopyToClipboard';
angular.element(document.body.append(copyElement));
// select the text
var range = document.createRange();
range.selectNode(copyElement);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
// copy & cleanup
document.execCommand('copy');
window.getSelection().removeAllRanges();
copyElement.remove();
}
PS
コメントの追加を歓迎します。 コントローラーからDOMを操作する の悪さを教えてください。
Jqueryサポートがある場合は、このディレクティブを使用してください
.directive('copyToClipboard', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.click(function () {
if (attrs.copyToClipboard) {
var $temp_input = $("<input>");
$("body").append($temp_input);
$temp_input.val(attrs.copyToClipboard).select();
document.execCommand("copy");
$temp_input.remove();
}
});
}
};
});
HTML
<a href="" copy-to-clipboard="Text to copy">Copy text</a>
プロジェクトに新しいライブラリを追加したくない場合、自分で作成する場合は、次のシンプルで簡単なソリューションをご覧ください。
注:promise機能で作成しました(これは素晴らしいです)
ここは CopyToClipboard.js module file
angular.module('CopyToClipboard', [])
.controller('CopyToClipboardController', function () {
})
.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);
//window.Prompt("Copy to clipboard: Ctrl+C, Enter", toCopy);
} finally {
textarea.remove();
}
return deferred.promise;
}
};
}];
}]);
それだけです https://Gist.github.com/JustMaier/6ef7788709d675bd82
今それを使用しましょう
angular.module('somthing')
.controller('somthingController', function ($scope, $copyToClipboard) {
// you are free to do what you want
$scope.copyHrefToClipboard = function() {
$copyToClipboard.copy(/*string to be coppied*/$scope.shareLinkInfo.url).then(function () {
//show some notification
});
};
}
そして最後にHTML
<i class="fa fa-clipboard" data-ng-click="copyHrefToClipboard($event)"></i>
これがあなたの時間を節約することを願っています
私が作成したモジュールngClipboardを使用できます。リンクはこちら https://github.com/nico-val/ngClipboard
_ng-copyable
_ディレクティブ、またはngClipboard.toClipboard()
ファクトリーを使用できます。