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>

Answer 1

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>
...

Answer 2

看来您正在忘记在重新配置的应用程序中包含jQueryUI。