jQueryUI + RequireJS + AngularJS исключает исключения

Question

Я использую jQueryUI в сочетании с RequireJS и AngularJS. Я завернул компоненты jqueryui в требуют утверждения как:

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) 
     } 
    } 
    }]); 
}); 

, но 2 из каждых 5 раз приложение выдает ошибку, как:

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 не получает привязки к времени загрузки по директиве $, но зависимости правильны, поэтому я потерян, почему. Есть предположения?

Answer 1

директива была require, когда она должна использоваться define.

Answer 2

Его вопрос времени. RequireJs загружает файлы асинхронно. Вам нужно сделать jquery-ui зависимость jquery в конфигурации require.

require.config({ 
    baseUrl: 'Scripts/App', 
    paths: { 
     jQueryUI: '../Lib/Jquery/jquery-ui.min', 
     jQuery: '../Lib/Jquery/jquery.min'   
    }, 
    shim: { 
     jQueryUI: { deps: ['jQuery'] }, 
    } 
}); 

Plunker