Wie konvertiert man die JavaScript-Funktion in die AngularJS-Direktive?

Question

JavaScript-Funktion kopiert Text aus dem Eingabefeld in die Zwischenablage, wenn Sie auf die Schaltfläche klicken. Es sieht aus wie folgt:

<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> 

Verbrauch:

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

ich das versucht habe:

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'); 
        } 
       } 
      } 
     } 
    }; 
}); 

Aber es funktioniert nicht.

Answer 1

Sie haben Scope, Element und attrs als Argument in Link-Funktion, warum nicht elem.bind('click', function() { }) verwenden oder Sie können angular.element(document).find('body'); verwenden und dann das Click-Ereignis daran binden.

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'); 
        } 
       }     
     } 
    }; 
});