Как сделать триггер ngclick перед вызовом Custom директивы

Question

Я пытаюсь реализовать копию в буфер обмена, который работает на кросс-браузер, используя Angular v1.5.5

Мне нужно сначала позвонить в службу, которая возвращает мне URL

И на основе возвращаемого 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);
            }

    }
}])

У меня есть контроллер, с помощью которого я вызывал эту функцию при нажатии

   $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 возвращает обещание, это обещание необходимо разрешить до его копирования в буфер обмена:

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 должен быть функцией, которая возвращает обещание.Директива разрешает это обещание и затем копирует данные в буфер обмена.

Для получения дополнительной информации см.

• Справочник по AngularJS rootScope / scope API - метод $ eval
• Справочник по AngularJS elem API
• Справочник по API AngularJS $ http