Question

我正在尝试使用angular v1.5.5实现在跨浏览器上工作的剪贴板副本

我需要先致电给我一个网址的服务

基于return Url，我需要允许用户使用复制到剪贴板的方式复制链接

在我看来，我有以下脚本

Html.RequiresJs("/js/content/ngClickCopy.js", 500);

如下所示

'use strict';
var copy = angular.module('ngClickCopy', []);

copy.service('ngCopy', ['$q', '$window', function ($q, $window) {
    var body = angular.element($window.document.body);
    var textarea = angular.element('<textarea/>');
    textarea.css({
        position: 'fixed',
        opacity: '0'
    });

    return function (url) {
        textarea.val(url);
        body.append(textarea);
        textarea[0].select();

        try {
            var successful = document.execCommand('copy');
            if (!successful) throw successful;
            //setTimeout(function () { textarea.remove(); }, 1500)
        } catch (err) {
            window.prompt("Copy to clipboard: Ctrl+C, Enter", url);
        }

    }
    if (document.selection) {
        document.selection.empty();
    }
    else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
    textarea.remove();    
}]);

copy.directive('ngClickCopy', ['ngCopy', '$rootScope', '$timeout', function (ngCopy, $rootScope, $timeout) {

        return {
            restrict: 'A',
            scope: {
                // Reference the outer scope
                fn: "&getOrderLink",

            },
            link: function (scope, elem, attrs) {
                function callFn() {
                    scope.$apply(scope.fn());
                    if (attrs.ngClickCopy != null) {
                        ngCopy(attrs.ngClickCopy);
                    }
                }
                setTimeout(
                    elem[0].addEventListener('click', callFn)
                , 20);
            }

    }
}])

我有一个控制器，借此我在ng click上调用了此功能

   $scope.getLink = function (orderId, ref) {
       $rootScope.orderLink = "";
       if (orderId != null && ref!= null) {
            var url = '/api/v1/GetEmailUrl';
            $http.get(url + '?orderId=' + orderId + '&ref=' + ref)
              .success(function (data) {
                 $rootScope.orderLink = data;
                 return $rootScope.orderLink;
            },
              function errorCallback(data) {
                 console.log("Unable to perform get request");
            });
        }
    }

在我看来

<button ng-click-copy="{{orderLink}}"
        ng-click="getOrderLink('@Html.Raw(Model.OrderId)' ,'@Html.Raw(user.reference)')" 
        class="btn btn_green btn_rounded btn_40">

此按钮位于模式弹出窗口中。该代码适用于chrome，即> 11，firefox，但适用于safari，它将触发window.prompt，值为空，因为首次加载页面时ng-click-copy为空，如果我关闭按钮所在的模式弹出窗口并重新打开，然后再次单击即可。我的问题是如何先设置触发器ngclick，然后将返回值分配给此自定义指令

当我执行以下操作时：

<button ng-click-copy="getLink('@Html.Raw(Model.OrderId)' ,'@Html.Raw(user.ref)')" 
        class="btn btn_green btn_rounded btn_40 singingControl-btns copyBtn">`

，这会触发窗口提示，显示值为getLink('0ff24f1' ,'6968')

Answer 1

我需要先执行ng-click表达式，然后将返回值分配给ng-click-copy指令，以便它可以执行复制到剪贴板的操作

由于$ http服务返回了一个Promise，因此在将Promise复制到剪贴板之前，必须先解决该Promise：

app.directive("clickCopyClipboard", function(ngCopy) {
    return {
        link: postLink,
    };
    function postLink (scope,elem,attrs) {
        elem.on("click", clickHandler);

        function clickHandler(ev) {
            var dataPromise = scope.$eval(attrs.resolveFirst);
            dataPromise.then(function(data) {
                ngCopy(data);
                alert("Copied to clipboard: "+data);
            }).catch(function(error) {
                console.log(error);
                alert("Error: "+error);
            });
        }
    }
})

用法

<button resolve-first="getLinkData('OrderId' ,'userRef')" click-copy-clipboard 
        class="btn btn_green btn_rounded btn_40 singingControl-btns copyBtn">

JS

$scope.getLinkData = function (orderId, ref) {
    var url = '/api/v1/GetEmailUrl';
    var params = {orderId: orderId, ref: ref};
    var config = {params: params};
    var promise = $http.get(url,config)
      .then(function (response) {
         return response.data;
    },
      function errorCallback(response) {
         console.log("Unable to perform get request");
         throw response;
    });
    return promise;
};

该指令添加了一个点击处理器，该处理器评估resolveFirst属性。 resolveFirst属性必须是一个返回诺言的函数。该指令可解决该承诺，然后将数据复制到剪贴板。

有关更多信息，请参见

如何在调用Custom指令之前制作触发器ngclick

1 个答案:

用法

JS