ZeroClipboard和RequireJS -没有定义ZeroClipboard
ZeroClipboard and RequireJS - ZeroClipboard is not defined
我试图在AngularJS/RequireJS应用程序中使用ZeroClipboard。
我已经把ZeroClipboard.js放到位置/assets/js/vendors/ZeroClipboard.js
我已经设置了RequireJS应用程序的main.js
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
尝试将controller.js
更改为
define(['clipboard'], function(ZeroClipboard) {
在函数参数中注明ZeroClipboard
使用指令并将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);
}
});
}
}
}]);
这对我有用:
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-在复制之前添加到值
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 为什么“;未定义的“;在JavaScript中结束循环
- 要求未定义JS回调参数
- 控制台返回var不是't定义,但它是
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 如何检查管道中未定义的项目
- TypeError:无法读取属性'推'未定义的JavaScript
- jQuery自定义验证比较多个输入的序列
- 查看JS对象的所有键,甚至是getter定义的键
- fetch() 函数未在 Ubuntu Chromium 浏览器上定义
- $window.ga在AngularJS事件中未定义
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 未捕获的TypeError无法读取未定义的属性socialsharing
- WebDriverException:tinyMCE未在selenium Web driver java中定义
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 定义完全独立的样式信息
- ZeroClipboard和RequireJS -没有定义ZeroClipboard