jQueryUI + RequireJS + AngularJS 抛出异常答案

【问题标题】：jQueryUI + RequireJS + AngularJS throws exceptionsjQueryUI + RequireJS + AngularJS 抛出异常
【发布时间】：2013-11-19 23:20:35
【问题描述】：

我将 jQueryUI 与 RequireJS 和 AngularJS 结合使用。我将 jqueryui 组件包装在 require 语句中，例如：

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

我尝试了无数事情，但始终没有运气。我很确定可拖动指令的加载时间不会绑定到 $ ，但是依赖关系是正确的，所以我不知道为什么。有什么想法吗？

【问题讨论】：

你认为这与奇怪的超时功能的 50 毫秒有关吗？这是为了避免异常吗？+
是的，我添加了 $timeout 来避免异常。

标签： javascript jquery jquery-ui angularjs requirejs

【解决方案1】：

该指令本应使用define，但它却拥有require。

【讨论】：

你能解释一下吗？不懂

【解决方案2】：

这是一个时间问题。 RequireJs 异步加载文件。你需要在 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'] },
    }
});

Plunker

【讨论】：

好的，这是有道理的，但我认为将组件包装在 require 中并让 jquery 成为其中的一部分可以解决这个问题，嗯？
我不确定包装的东西，但我在答案中添加了一个示例。