jQueryUI + RequireJS + AngularJS引發異常

Question

我將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 

我嘗試了無數次嘗試，但始終沒有運氣。 我非常確定，可拖動對象不會受指令的加載時間綁定到$，但是依賴項是正確的，所以我不知道為什么。 有什么想法嗎？

Answer 1

這是一個時間問題。 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'] },
    }
});

柱塞

Answer 2

該指令在應使用define時具有require 。