Javascript jQueryUI+;RequireJS+;AngularJS抛出异常
我将jQueryUI与RequireJS和AngularJS结合使用。我将jqueryui组件包装在require语句中,如:Javascript jQueryUI+;RequireJS+;AngularJS抛出异常,javascript,jquery,jquery-ui,angularjs,requirejs,Javascript,Jquery,Jquery Ui,Angularjs,Requirejs,我将jQueryUI与RequireJS和AngularJS结合使用。我将jqueryui组件包装在require语句中,如: define(['jquery','./core','./mouse', './widget'], function (jQuery) { (function( $, undefined ) { $.widget("ui.draggable", $.ui.mouse, {....}); })(jQuery); }); 并创建了An
define(['jquery','./core','./mouse', './widget'], function (jQuery) {
(function( $, undefined ) {
$.widget("ui.draggable", $.ui.mouse, {....});
})(jQuery);
});
并创建了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)
}
}
}]);
});
但每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
我尝试了无数的事情,但始终没有运气。我很确定draggable没有绑定到指令的$by-load-time,但是依赖项是正确的,所以我不知道为什么。有什么想法吗?这是个时间问题。RequireJs异步加载文件。您需要在require配置中将jqueryui设置为jquery的依赖项
require.config({
baseUrl: 'Scripts/App',
paths: {
jQueryUI: '../Lib/Jquery/jquery-ui.min',
jQuery: '../Lib/Jquery/jquery.min'
},
shim: {
jQueryUI: { deps: ['jQuery'] },
}
});
指令在应该使用
define
的时候使用了require
您认为这与奇怪的超时功能的50毫秒有关吗?这是为了避免异常吗?+是的,我添加了$timeout以避免异常。好的,这是有道理的,但我认为在require中包装组件并让jquery参与其中会解决这个问题,嗯?我不确定包装的事情,但我在回答中添加了一个示例。你能解释一下吗?不明白