current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
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 Nov 19 '13 at 23:25
    
Ya, I added the $timeout to try to avoid the exception. –  amcdnl Nov 19 '13 at 23:46

2 Answers 2

up vote 0 down vote accepted

The directive had require when it should have used define.

share|improve this 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'] },
    }
});

Plunker

share|improve this answer
    
Okay, that makes sense but I thought the wrapping of the components in require and having jquery be part of that would fix that eh? –  amcdnl Nov 20 '13 at 22:22
    
I'm not sure about the wrapping thing, but I added an example to my answer. –  Rob Nov 22 '13 at 18:43

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.