[英]jQueryUI + RequireJS + AngularJS throws exceptions
I'm using jQueryUI in combination with RequireJS and AngularJS. 我将jQueryUI与RequireJS和AngularJS结合使用。 I wrapped the jqueryui components in require statements like:
我将jqueryui组件包装在require语句中,例如:
define(['jquery','./core','./mouse', './widget'], function (jQuery) {
(function( $, undefined ) {
$.widget("ui.draggable", $.ui.mouse, {....});
})(jQuery);
});
and created a AngularJS directive to wrap it like: 并创建了一个AngularJS指令将其包装为:
require(['angular', 'app', 'jquery', 'lib/jquery-ui/draggable'], function(angular, app, $){
app.directive('draggable', ['$timeout','draggableConfig', function ($timeout) {
return {
restrict: 'AE',
scope: {
ngModel: '=',
options: '='
},
link: function ($scope, $element, $attributes) {
$timeout(function(){
$element.draggable();
}, 50)
}
}
}]);
});
but 2 out of every 5 times the app throws an error like: 但每5次应用中有2次抛出错误,例如:
TypeError: Object [object Object] has no method 'draggable'
at http://localhost/phoenix/directives/draggable.js:21:30
at http://localhost/phoenix/lib/angular/angular.js:13152:28
at completeOutstandingRequest (http://localhost/phoenix/lib/angular/angular.js:3996:10)
at http://localhost/phoenix/lib/angular/angular.js:4302:7
I've tried countless things but had no luck consistently. 我尝试了无数次尝试,但始终没有运气。 I'm pretty sure the draggable isn't getting bound to the $ by load time of the directive but the dependencies are right so I'm lost why.
我非常确定,可拖动对象不会受指令的加载时间绑定到$,但是依赖项是正确的,所以我不知道为什么。 Any thoughts?
有什么想法吗?
Its a timing issue. 这是一个时间问题。 RequireJs loads the files asynchronously.
RequireJs异步加载文件。 You need to make jquery-ui a dependency of jquery in the require config.
您需要在require config中使jquery-ui成为jquery的依赖项。
require.config({
baseUrl: 'Scripts/App',
paths: {
jQueryUI: '../Lib/Jquery/jquery-ui.min',
jQuery: '../Lib/Jquery/jquery.min'
},
shim: {
jQueryUI: { deps: ['jQuery'] },
}
});
该指令在应使用define
时具有require
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.