Question

我目前正在AngularJS应用程序中移动代码，并开始收到客户指令的错误。该指令在原始版本中工作正常，但在我移动了一些内容后返回下面列出的错误。

我一直在处理代码，试图找到我错过的引用，关闭的文件版本，或者此错误突然弹出的任何其他原因。遗憾的是我找不到任何东西。

可能导致AngularJS指令发生以下错误的原因是什么？

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

我的指令定义如下：

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

使用的示例HTML标记是：

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

Answer 1

包含的顺序很重要！正确的顺序：

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

AngularJS指令对象具有“无方法”

2 个答案: