AngularJS Directive Object Has "No Method"

Question

I am currently moving around code in an AngularJS app and have started to receive an error on a customer directive. The directive works fine in the original, but is returning the error listed below after I've moved a few things.

I have been working through the code to try and find a reference I missed, a file version that is off, or any other reason why this error is suddenly popping up. I've unfortunately not found anything.

What might be causing the following error to occur on an AngularJS directive?

TypeError: Object [object Object] has no method 'slider'
   at link (http://localhost:8000/static/modeling/js/directives/slider.js:9:13)
   at k (http://localhost:8000/static/js/angular.min.js:44:444)
   at e (http://localhost:8000/static/js/angular.min.js:40:139)
   at e (http://localhost:8000/static/js/angular.min.js:40:156)
   at e (http://localhost:8000/static/js/angular.min.js:40:156)
   at e (http://localhost:8000/static/js/angular.min.js:40:156)
   at k (http://localhost:8000/static/js/angular.min.js:44:382)
   at e (http://localhost:8000/static/js/angular.min.js:40:139)
   at e (http://localhost:8000/static/js/angular.min.js:40:156)
   at http://localhost:8000/static/js/angular.min.js:39:205 <slider id="slider" scale="scale" class="span2 ng-isolate-scope ng-scope">

My directive is defined as follows:

myApp.directive('slider', function() {
    return {
      restrict: 'E',
      scope: {
        scale: '='
      },
      link: function(scope, elm, attrs) {
        console.log(elm);
        elm.slider({  // !! THIS IS LINE 9 (per error message) !!
            min: 1,
            max: 50,
            step: 1,
            value: 30,
            slide: function(event, ui) {
                scope.scale = ui.value;
                scope.$apply();
            }
        })
      }
    }
});

An example HTML tag being used is:

<slider id="slider" scale="scale" class="span2"></slider>

Looks like you might be forgetting to include jQueryUI in your reconfigured app. — Lukas
– Lukas, Commented Jul 31, 2013 at 17:36
Thank you! Please provide in answer form so I may further extoll the solution! :) — Nicholas Pappas
– Nicholas Pappas, Commented Jul 31, 2013 at 17:56

Raul Guiu · Accepted Answer · 2014-03-24 11:04:41Z

2

The order of includes are important! The correct order:

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/angular.min.js"></script>
...

edited Mar 24, 2014 at 11:04

Raul Guiu

2,41423 silver badges39 bronze badges

answered Mar 24, 2014 at 10:41

Vilmos Kiss

392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lukas · Accepted Answer · 2013-07-31 17:58:50Z

1

It looks like you are be forgetting to include jQueryUI in your reconfigured app.

answered Jul 31, 2013 at 17:58

Lukas

9,8452 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive Object Has "No Method"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related