Kenny Kenny - 1 year ago 282
AngularJS Question

Angular Controller Using ngClipboard - Error: Unknown provider

I'm trying to set an

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


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

Angular Controller (updated)

(function() {

.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
into the controller, but it doesn't seem to work. Thanks for any help!

(note: I have included
in my 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! - 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 Source

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

<script src="//"></script>
<script src=""></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="">

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

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()}}">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download