angular指令:實現複製到剪貼簿功能
阿新 • • 發佈:2019-01-04
找過clipboard 和 ngclipboard兩個外掛,建過簡單的demo測試都是可以的,一旦用到專案中就各種報錯,專案是angular + require搭建的,查閱了各種資料,終於找到了相對簡單的指令實現方法。
var myApp = angular.module('app',[]); myApp.directive('ngCopyable', function($document) { return { restrict: 'A', scope: { copyText: '=' }, link: function(scope, element, attrs){ //點選事件 element.bind('click', function(){ //建立將被複制的內容 $document.find('body').eq(0).append('<div id="ngCopyableId">' + scope.copyText + '</div>'); var newElem = angular.element(document.getElementById('ngCopyableId'))[0]; var range = document.createRange(); range.selectNode(newElem); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); var successful = document.execCommand('copy'); //執行完畢刪除 var oldElem = document.getElementById('ngCopyableId'); oldElem.parentNode.removeChild(oldElem); window.getSelection().removeAllRanges(); //提示 if (successful) { alert('已成功複製:' + scope.copyText); } else { alert('瀏覽器不支援複製'); } }); } }; });
<div ng-copyable copy-text="'我是被複制的'">複製</div>
點選後的效果圖: