使用ngClipboard的Angular控制器-错误：未知的提供程序

Question

I'm trying to set an ng-click event inside of a controller so that when the user clicks a div the function is ran and compiles a string and adds it to the clipboard.

I'm getting the following error though:

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>

Angular Controller (updated)

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

})();

I have some other code in the controller that deals with a service I created, but for simplicity sake, I excluded it and only have the bare essentials for the ngClipboard.

I've also tried many different variations of injecting ngClipboard into the controller, but it doesn't seem to work. Thanks for any help!

(note: I have included clipboard.min.js and ngclipboard.min.js in my html)

EDIT (SOLVED)

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 (NEW! - primary angular file)

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

So putting the new addition of ['ngclipboard'] into the main file and not a controller allowed the app to work properly. Before, the app would load, no errors, but entire page would be blank. Special thanks to Shannon for the help.

Answer 1

Make sure you include the source correctly like so into the bottom of body

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

Looks like you've simply missed the module dependency.

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

Not only that, but you've tried to use a provider called ngClipboard which does not exist in the source.

This ngclipboard module uses attribute directives only. 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>

This will copy the content from the input when the button is pressed (targets the id).

In your case, if your vm.copy() method just returns a string, just do something like this:

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

Answer 2

The ngClipboard module is a directive only. Bringing it into my controller breaks my app as well. You just need to add the markup directly into your view:

---

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