未定义ZeroClipboard和RequireJS - ZeroClipboard。

Question

我试图在AngularJS/RequireJS应用程序中使用ZeroClipboard。

我把ZeroClipboard.js放到了/assets/js/vendors/ZeroClipboard.js的位置

我已经设置了main.js应用程序的RequireJS

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';
               });

           });

在我称之为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;
});

我只得到了ReferenceError: ZeroClipboard is not defined

Answer 1

使用指令并将ZeroClipboard.js直接加载到DOM中是有效的。不确定如何通过AMD加载该文件，因为它总是返回一个错误。

                    .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);
                                    }
                                });
                            }
                        }
                    }]);

Answer 2

尝试将您的controller.js更改为

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

注意函数参数中的ZeroClipboard。

Answer 3

这对我起了作用：

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