Ich war eigentlich auf der Suche nach dem Inhalt der Zwischenablage mit eckigen JS, um eine Kopie Paste Ding zu simulieren.Wie bekomme ich Zwischenablage Daten in eckigen JS
Antwort
BTW, wenn Angular mit kopieren mit einem Chrome Packaged App in die Zwischenablage kopieren, gehen Sie wie folgt vor:
- hinzufügen "clipboardRead" und "clipboardWrite" auf die "Berechtigungen" in der manifest.json.
- Verwendung ng Klicken Sie in der Ansicht den Wert an die Steuerung $ scope zu füttern, wie: Daten-ng-click = "copyUrlToClipboard (file.webContentLink)"
eine Funktion in Ihrem Controller wie gesagt:
$scope.copyUrlToClipboard = function(url) { var copyFrom = document.createElement("textarea"); copyFrom.textContent = url; var body = document.getElementsByTagName('body')[0]; body.appendChild(copyFrom); copyFrom.select(); document.execCommand('copy'); body.removeChild(copyFrom); this.flashMessage('over5'); }
habe ich eine Richtlinie für die Zwischenablage kopieren, die die document.execCommand() Methode verwendet.
Richtlinie
(function() {
app.directive('copyToClipboard', function ($window) {
var body = angular.element($window.document.body);
var textarea = angular.element('<textarea/>');
textarea.css({
position: 'fixed',
opacity: '0'
});
function copy(toCopy) {
textarea.val(toCopy);
body.append(textarea);
textarea[0].select();
try {
var successful = document.execCommand('copy');
if (!successful) throw successful;
} catch (err) {
console.log("failed to copy", toCopy);
}
textarea.remove();
}
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
copy(attrs.copyToClipboard);
});
}
}
})
}).call(this);
Html
<button copy-to-clipboard="Copy Me!!!!" class="button">COPY</button>
Wie könnte man etwas anderes kopieren als "Kopiere mich !!!!" - wie zum Beispiel den Inhalt einer Textarea? – DaveC426913
Verwenden Sie im Controller eine Bereichsvariable $ scope.copyMe = ''; und verwenden Sie diese Variable im Textarea-Wert wie folgt.
Wenn ich das benutze code, textarea.val (toCopy) fügt nichts in den textarea an (mein toCopy ist text html). Wenn ich es an den Körper angehängt habe, hängt es [Objekt Objekt] an. Nicht sicher, was los ist. –
hier ist eine kurze Version, die ich verwenden -
function copyToClipboard(data) {
angular.element('<textarea/>')
.css({ 'opacity' : '0', 'position' : 'fixed' })
.text(data)
.appendTo(angular.element($window.document.body))
.select()
.each(function() { document.execCommand('copy') })
.remove();
}
Sicher sieht prägnant aus. Ich wünschte, ich könnte herausfinden, dass es funktioniert. Kopiert nicht für mich. – DaveC426913
'angular.element()' enthält die Funktion 'appendTo()' nur, wenn Sie die gesamte * jQuery * -Bibliothek einschließen. Dasselbe gilt für 'select()' –
ich hatte das gleiche Problem und ich benutzte Winkel-Zwischenablage-Funktion [1] was uns Es gibt eine neue Auswahl API und Clipboard API, die in den neuesten Browsern verfügbar ist.
Zuerst müssen wir eckig-Zwischenablage lib installieren, ich benutze Bower.
$ bower install angular-clipboard --save
Um das Modul zu importieren, folgen Sie in HTML.
<script src="../../bower_components/angular-clipboard/angular-clipboard.js"></script>
Um Werte zu Element gesetzt Controller $ Umfang in
$scope.textToCopy = 'Testing clip board';
Laden Sie die Zwischenablage-Modul,
angular.module('testmodule', ['angular-clipboard']);
Dies funktioniert für Chrome 43+, 41+ Firefox, Opera 29 mit + und IE10 +.
Seine einfache & hat gut funktioniert.
[1] https://www.npmjs.com/package/angular-clipboard
Danke, empfehlen
- 1. Wie lade ich Daten aus eckigen Daten?
- 2. Wie bekomme ich JSON-Daten von PHP-Datei in eckigen JS
- 3. Wie bekomme ich eine Instanz von Objekt erstellt von eckigen js aus JavaScript-Funktion außerhalb eckigen
- 4. Suchfeld in eckigen js
- 5. Render Teilansicht in eckigen JS
- 6. Wie lange Presseereignis in eckigen js bekommen?
- 7. Wie ein Ladebild in eckigen js anzuzeigen
- 8. Wie bekomme ich Popup, wenn URL Status Erfolg in eckigen js
- 9. Datatable Buttons - Daten aus eckigen
- 10. Halten Sie Daten zwischen den Seiten in eckigen js
- 11. Wie bekomme ich Daten?
- 12. Wie bekomme ich die Werte von PHP-Seite zu eckigen js Controller
- 13. Android Wie bekomme ich eine Zeichenfolge aus der Zwischenablage onPrimaryClipChanged?
- 14. Wie bekomme ich richtig codierten HTML aus der Zwischenablage?
- 15. Umsetzung der Werbe-Richtlinie in eckigen js
- 16. Get Zwischenablage Daten
- 17. Wie mache ich einen Thread mit eckigen js
- 18. teilen Daten zwischen Vorlagen in eckigen, wie?
- 19. Wie bekomme ich HTML-Daten aus der OS X Pasteboard/Zwischenablage?
- 20. UI-Benachrichtigungen mit eckigen js
- 21. Seitenumleitung funktioniert jetzt in eckigen js
- 22. Rufen Sie externe js Datei Funktion in eckigen js Controller
- 23. js bekomme Daten von xml response.text()
- 24. Wny Popover nicht in eckigen js angezeigt?
- 25. warum splice nicht richtig in eckigen js
- 26. Löschen Funktion funktioniert nicht in eckigen Js
- 27. Verschachtelung ng-Ansichten in eckigen js
- 28. ng-submit funktioniert nicht in eckigen js
- 29. Arbeiten mit eckigen js, Node js server und express js
- 30. Seitennavigation in asp.net MVC mit eckigen js
Highly [Winkel zeroclipboard] (https://github.com/lisposter/angular-zeroclipboard), ist es besser als 'ng-clip' dokumentiert . Ich habe auch nicht geschafft, 'ng-clip' zu funktionieren. – Fedor
ng-clip hängt (zumindest in einigen Betriebsmodi) von ZeroClipboard ab und hat es in meinem Fall viel einfacher gemacht, die Funktion "Copy to Clipboard" zu integrieren. Ich folgte [diese wenigen Schritte] (https://github.com/asafdav/ng-clip#usage), um es zum Laufen zu bringen. –