ngClipboardを使用した角膜コントローラー - エラー：不明なプロバイダー

Question

ng-clickイベントをコントローラーの内側に設定しようとしているため、ユーザーがdivをクリックしたときに関数が実行され、文字列をコンパイルしてクリップボードに追加します。

でも、私は次のエラーを取得しています：

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> 

角度コントローラ（更新）

(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; 
     }; 
    } 

})(); 

を私はいくつかの他のコードを持っていますコントロール私が作ったサービスを扱っているのですが、簡単にするために、私はそれを除外し、ngClipboardには欠かせないものしか持っていません。

私はコントローラにngClipboardを注入する方法もたくさんありましたが、動作していないようです。助けてくれてありがとう！

（注：私は私のhtmlでclipboard.min.jsとngclipboard.min.jsが含まれている）

EDIT（解決しよう）

HTML

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

コントローラ

Left it alone, no "ngclipboard" stuff here 

app.js（NEW！ -

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

）の角ファイルのプライマリだから、メインファイルではなくアプリが正常に動作することができ、コントローラに[「ngclipboard」]の新しい追加を置きます。以前は、アプリケーションがロードされ、エラーは発生しませんでしたが、ページ全体が空白になりました。シャノンのおかげで特別な助けになりました。

Answer 1

はあなたが単にモジュールの依存関係を見逃しているよう

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

が見える本体の底部に正しくそうのようなソースが含まれていることを確認します。

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

それだけでなく、あなたがソースに存在しませんngClipboardと呼ばれるプロバイダを使用しようとしました。

このngclipboardモジュールは、属性ディレクティブのみを使用します。 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> 

ボタンが押されたときには、入力からコンテンツをコピーします（IDを対象）。あなたのvm.copy()方法は、単に文字列を返す場合は、あなたの場合は

は、ちょうどこのような何かを：

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

Answer 2

ngClipboardモジュールのみディレクティブです。それを私のコントローラに持っていくことで私のアプリも壊れます。あなたは自分のビューに直接マークアップを追加する必要があります。

---

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