Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using jQueryUI in combination with RequireJS and AngularJS. I wrapped the jqueryui components in require statements like:

define(['jquery','./core','./mouse', './widget'], function (jQuery) {
    (function( $, undefined ) {

         $.widget("ui.draggable", $.ui.mouse, {....});
    })(jQuery);

});

and created a AngularJS directive to wrap it like:

 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:

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?

share|improve this question
 
do you think it has somethin to do with the 50 milliseconds of the weird timeout function ? is this a try to avoid the exception ?+ –  john Smith 17 hours ago
 
Ya, I added the $timeout to try to avoid the exception. –  amcdnl 17 hours ago

1 Answer

up vote 0 down vote

Its a timing issue. RequireJs loads the files asynchronously. You need to make jquery-ui a dependency of jquery in the require config.

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.