如何在AngularJS中使用ng-click将字符串复制到剪贴板？

Question

我想在点击按钮上复制链接AnuglarJS.我试过下面的代码,但我遇到了这个错误:

这是我的button:

<button class="btn btn-info" ng-click="test2(\'' + decodeURI(data.name) + '\');" >copy</button>

我的功能在于controller.js:

  $scope.test2 = function (name)
    {            
        var res = 'http://example.com?from=' + name;
        var range = document.createRange();         
        range.selectNode(res); // here getting error
        window.getSelection().addRange(range);
        try {                
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy email command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }     
        window.getSelection().removeAllRanges();
    }

点击按钮我要复制此链接任何人都可以请帮助我怎么做.

Answer 1

根据selectNode()文档, range.selectNode()需要一个类型为node的参数,其中您的节点是一个字符串 - > var res = 'http://example.com?from=' + name;.

Range.selectNode()方法将Range设置为包含Node及其内容.Range的开始和结束的父节点将与referenceNode的父节点相同.

只需为副本创建一个虚拟元素,将其附加到DOM,复制并从DOM中删除它:

$scope.copyToClipboard = function (name) {
    var copyElement = document.createElement("textarea");
    copyElement.style.position = 'fixed';
    copyElement.style.opacity = '0';
    copyElement.textContent = 'http://example.com?from=' + decodeURI(name);
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(copyElement);
    copyElement.select();
    document.execCommand('copy');
    body.removeChild(copyElement);
}

视图

<button class="btn btn-info" 
        ng-click="copyToClipboard(data.name);">copy</button>