角度 js zeroclipboard 复制 html答案

【问题标题】：angular js zeroclipboard copy html角度 js zeroclipboard 复制 html
【发布时间】：2015-07-13 23:15:29
【问题描述】：

我正在尝试为 html 链接制作复制按钮。我希望用户单击按钮并加载 html（作为“文本/html”），当粘贴到电子邮件或 Word 文档中时，它会呈现为 HTML 链接而不是全文链接。

即我想显示 mywebsite.com 而不是

<a href=http://www.mywebsite.com>mywebsite.com</a>

复制时。

我正在使用 Angular JS 和 Zeroclipboard (angular-zeroclipboard.js) 这是我的代码：控制器.js

var app = angular.module('myApp', ['zeroclipboard']);

app.config(['uiZeroclipConfigProvider', function(uiZeroclipConfigProvider) {
// config ZeroClipboard
uiZeroclipConfigProvider.setZcConf({
  swfPath: 'assets/javascripts/vendor/ZeroClipboard.swf'
});
}]);

我的 HTML 文件：

 <button ng-show="!copiedHTML" class="btn btn-SwBLUE space hidden-xs" ui-zeroclip zeroclip-copied="copiedHTML=true" zeroclip-on-error="clipError($event)" zeroclip-text="<a href='http://www.mywebsite.com/page_id=3'>http://www.mywebsite.com</a>"><span class="glyphicon glyphicon-duplicate"></span> Copy HTML Text</button>

 <script src="javascripts/vendor/ZeroClipboard.js"></script>
<script src="javascripts/vendor/angular-zeroclipboard.js"></script>

知道如何设置复制文本的 MIME 类型吗？非常感谢！

【问题讨论】：

标签： angularjs zeroclipboard

【解决方案1】：

好的，终于用 ng-clip 搞定了。在这个脚本中，我使用相同的指令来复制纯文本和 HTML 文本。我在指令标签中设置了一个 mime 类型。这些按钮变为绿色并带有 OK 字形（使用引导程序）2 秒钟，然后恢复正常。它是这样的：

将 JS 添加到您的 HTML 文件中：

<script src="javascripts/vendor/ZeroClipboard.js"></script>
<script src="javascripts/vendor/ng-clip.min.js"></script>

向你的 JS 控制器添加指令：

var app = angular.module('myApp', ['ngClipboard']); 

[...]   

app.directive('copyButton', function ($timeout) {
    return {
        restrict: "E",
        scope: {
                    content: '@',
                    mimeType: '@',
                    innerText: '@',
                    class: '@'
                },
        template: '<button type="button" class="btn btn-SwBLUE space hidden-xs" clip-copy="content" clip-click="clipped()" data-clip-copy-mime-type="{{mimeType}}"><i class="glyphicon glyphicon-duplicate"></i> {{innerText}} </button>',
        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);
            };
        }
    };
});

并在我的 HTML 中使用它：

<copy-button class="hidden-xxs" content="<a href=www.mywebsite.com?page=321>mywebsite.com</a>" mime-type="text/html"></copy-button>

很酷，不是吗？ :D

【讨论】：