Kenny Kenny - 3 months ago 48
AngularJS Question

Angular Controller Using ngClipboard - Error: Unknown provider

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

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