ZeroClipboard and RequireJS - ZeroClipboard is not defined

Question

I'm attempting to use ZeroClipboard inside an AngularJS/RequireJS Application.

I have put ZeroClipboard.js into the location /assets/js/vendors/ZeroClipboard.js

I have set up the main.js of the RequireJS application

main.js

requirejs.config({

    paths: { 
        jQuery: 'vendors/jquery.min',
        'clipboard': 'vendors/ZeroClipboard',
        underscore: 'vendors/underscore-min',
        angular: 'vendors/angular.min',
        'angular-route': 'vendors/angular-route.min',
        'controllers': 'controllers',
        'services': 'services',
        'filters': 'filters',
        'directives': 'directives',
        'app': 'app'

    },

    shim: {
        underscore: {
            exports: '_'
        },
        'jQuery': {
            'exports': 'jQuery'
        },
        'angular': {
            exports: 'angular'
        },
        'states': {
            deps: ['angular'],
            exports: 'states'
        },
        'angular-route': {
            deps: ['angular']
        }
    },
    priority: [
        'angular'
    ]
});

requirejs(['angular',
            'app',
            'underscore',
            'routes',
            'vendors/jquery.min',
            'services/services',
            'directives/directives',
            'filters/filters',
            'controllers/controllers'
           ], function (angular, app, _) {
               angular.element(document).ready(function () {
                   angular.bootstrap(document, ['App']);
                   document.getElementsByTagName('html')[0].dataset.ngApp = 'App';
               });

           });

And inside the controller that I am calling ZeroClipboard

controller.js

define(['clipboard'], function() {
    var AppCtrl = function($scope, $modal, $timeout, $log, $http, $routeParams,  $rootScope) {
        var client = new ZeroClipboard( $("li#copy-buildr") );
    };
    return AppCtrl;
});

All I seem to get is ReferenceError: ZeroClipboard is not defined

score 0 · Answer 1 · answered Aug 18 '14 at 08:26

0

Try changing your controller.js to

define(['clipboard'], function(ZeroClipboard) {

note ZeroClipboard in the function arguments.

answered Aug 18 '14 at 08:26

idursun

6,261
1
37
51

I done that but now I receive 'TypeError: undefined is not a function ' – ngplayground Aug 18 '14 at 08:45
It should work, please double check. I have done the same thing on my machine now and it works as expected. – idursun Aug 18 '14 at 08:51
Within the controller, any reference to `ZeroClipboard` throws the error. I have put `console.log('hi');` inside the `ZeroClipboard.js` file and it shows in the Console.log fine but I cannot reference `ZeroClipboard` itself – ngplayground Aug 18 '14 at 08:54

score 0 · Accepted Answer · answered Aug 18 '14 at 10:34

Using a directive and loading the ZeroClipboard.js directly into the DOM has worked. Unsure how to load that file via AMD though as it always returns an error.

                    .directive('clipCopy', ['$window', function ($window) {
                        return {
                            scope: {
                                clipCopy: '&',
                                clipClick: '&'
                            },
                            restrict: 'A',
                            link: function (scope, element, attrs) {
                                // Create the clip object
                                var clip = new ZeroClipboard( element, {
                                    moviePath: '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.1.7/ZeroClipboard.swf',
                                    trustedDomains: ['*'],
                                    allowScriptAccess: "always"          
                                });

                                clip.on( 'mousedown', function(client) {
                                    client.setText(scope.$eval(scope.clipCopy));
                                    if (angular.isDefined(attrs.clipClick)) {
                                        scope.$apply(scope.clipClick);
                                        console.log($scope.clipClick);
                                    }
                                });
                            }
                        }
                    }]);

score 0 · Answer 3 · answered May 29 '15 at 18:04

This worked for me:

    require(["zeroClipboard"], $.proxy(function (ZeroClipboard) {
        var client = new ZeroClipboard( $('.link-label') );
        client.on( 'ready', function(event) {
            client.on( 'copy', function(event) {
              event.clipboardData.setData('text/plain', $(event.target).prev().html());
            } );
            client.on( 'aftercopy', function(event) {
              console.log('Copied text to clipboard: ' + event.data['text/plain']);
            } );
        } );
        client.on( 'error', function(event) {
            ZeroClipboard.destroy();
        } );
    }, this));

ZeroClipboard and RequireJS - ZeroClipboard is not defined

3 Answers3