JavaScript関数をAngularJSディレクティブに変換する方法は？

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

link関数の引数としてscope、element、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'); 
        } 
       }     
     } 
    }; 
});