Angular Controller mit ngClipboard - Fehler: Unbekannter Provider

Question

Ich versuche, ein ng-click Ereignis innerhalb eines Controllers, so dass, wenn der Benutzer auf ein Div klickt die Funktion ran und kompiliert eine Zeichenfolge und fügt es in die Zwischenablage. obwohl

Ich erhalte die folgende Fehlermeldung:

angular.js:13550Error: [$injector:unpr] Unknown provider: ngClipboardProvider <- ngClipboard <- eventCtrl 

HTML

<div class="row"> 
    <div><div ng-click="vm.copy()" class="button tiny">Copy</div></div> 
</div> 

Winkelregler (aktualisiert)

(function() { 

    angular 
     .module('monitorApp', ['ngClipboard']) 
     .controller('eventCtrl', eventCtrl); 

    eventCtrl.$inject = ['$scope', '$routeParams', 'monitorData', 'ngClipboard']; 
    function eventCtrl($scope, $routeParams, monitorData, ngClipboard) { 
     var vm = this; 

     vm.copy = function() { 
      vm.copyjunk = "COPIED crap here!!"; 
      vm.copyjunk = ngClipboard.toClipboard; 
     }; 
    } 

})(); 

ich einen anderen Code haben in die Kontrolle Es handelt sich um einen Dienst, den ich erstellt habe, aber der Einfachheit halber habe ich ihn ausgeschlossen und habe nur das Nötigste für das ngClipboard.

Ich habe auch viele verschiedene Varianten der Injektion in den Controller versucht, aber es scheint nicht zu funktionieren. Danke für jede Hilfe!

(Anmerkung: Ich habe clipboard.min.js und ngclipboard.min.js in meinem html enthalten)

EDIT (GELÖST)

HTML

<div ngclipboard data-clipboard-text="COPIED TEXT HERE!" class="button tiny">Copy Dial-in</div> 

-Controller

Left it alone, no "ngclipboard" stuff here 

app.js (NEU! - Primärwinkel Datei)

angular.module('monitorApp', ['ngRoute','ngclipboard']); 

So den neuen Zusatz von [ ‚ngclipboard‘] in die Hauptdatei und nicht ein Controller die App richtig funktioniert, erlaubt setzen. Vorher würde die App geladen, keine Fehler, aber die gesamte Seite wäre leer. Besonderer Dank an Shannon für die Hilfe.

Answer 1

Achten Sie darauf, die Quelle korrekt wie so in den Boden des Körpers

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script> 
<script src="dist/ngclipboard.min.js"></script> 

Sieht aus wie Sie haben einfach die Modulabhängigkeits verpasst umfassen.

angular.module('monitorApp'), ['ngclipboard']);

Nicht nur das, aber Sie haben versucht, einen Anbieter zu verwenden, genannt ngClipboard, die in der Quelle nicht existiert.

Dieses ngclipboard-Modul verwendet nur Attribut-Direktiven. HTML:

<!-- Target --> 
<input id="foo" value="https://github.com/sachinchoolur/ngclipboard.git"> 

<!-- Trigger --> 
<button class="btn" ngclipboard data-clipboard-target="#foo"> 
    <img src="assets/clippy.svg" alt="Copy to clipboard"> 
</button> 

Dadurch wird der Inhalt von dem Eingang kopieren, wenn Sie die Taste (Ziele, die id) gedrückt wird.

In Ihrem Fall, wenn Ihr vm.copy() Methode nur einen String zurückgibt, tun nur so etwas wie dieses:

<button class="btn" ngclipboard data-clipboard-text="{{vm.copy()}}"> 
    {{vm.copy()}} 
</button> 

Answer 2

Das ngClipboard Modul eine Richtlinie nur ist. Bring es in meine Steuerung bricht auch meine App. Sie müssen nur das Markup direkt in Ihre Ansicht hinzuzufügen:

---

<button class="btn" ngclipboard data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> 
    Copy to clipboard 
</button> 

---

<button class="btn" ngclipboard data-clipboard-text="{{vm.copyjunk}}"> 
    {{vm.copyjunk}} 
</button>