Question

当您单击按钮时，JavaScript函数会将文本从输入字段复制到剪贴板。它看起来如下：

<script type="text/javascript">
    (function () {
        'use strict';
        // click events
        document.body.addEventListener('click', copy, true);
        // event handler
        function copy(e) {
            // find target element
            var
              t = e.target,
              c = t.dataset.copytarget,
              inp = (c ? document.querySelector(c) : null);
            // is element selectable?
            if (inp && inp.select) {
                // select text
                inp.select();
                try {
                    // copy text
                    document.execCommand('copy');
                    inp.blur();
                }
                catch (err) {
                    alert('please press Ctrl/Cmd+C to copy');
                }
            }
        }
    })();
</script>

用法：

<button id="CopyTextBtn" autofocus
        type="submit"
        class="uui-button lime-green"
        data-copytarget="#ClientsURL"
        ng-click="closeThisDialog('Cancel')">
    Copy
</button>

我试过这个：

appModule.directive('data-copytarget', function () {
    return {
        scope: {},
        link: function (scope, element)
        {
            // click events
            document.body.addEventListener('click', copy, true);
            // event handler
            function copy(e) {
                // find target element
                var
                  t = e.target,
                  c = t.dataset.copytarget,
                  inp = (c ? document.querySelector(c) : null);
                // is element selectable?
                if (inp && inp.select) {
                    // select text
                    inp.select();
                    try {
                        // copy text
                        document.execCommand('copy');
                        inp.blur();
                    }
                    catch (err) {
                        alert('please press Ctrl/Cmd+C to copy');
                    }
                }
            }
        }
    };
});

但是，它不起作用。

Answer 1

你在链接函数中有作为参数的范围，元素和attrs，为什么不使用elem.bind('click', function() { })，或者你可以使用angular.element(document).find('body');然后将click事件绑定到它。

appModule.directive('data-copytarget', function () {
    return {
        scope: {},
        link: function (scope, elem)
        {
            // click events
            elem.bind('click', function() {
                // find target element
                var
                  t = e.target,
                  c = t.dataset.copytarget,
                  inp = (c ? document.querySelector(c) : null);
                // is element selectable?
                if (inp && inp.select) {
                    // select text
                    inp.select();
                    try {
                        // copy text
                        document.execCommand('copy');
                        inp.blur();
                    }
                    catch (err) {
                        alert('please press Ctrl/Cmd+C to copy');
                    }
                }                
        }
    };
});

如何将JavaScript函数转换为AngularJS指令？

1 个答案: