如何在我的应用程序中包含 angular-ui-slider？ （TypeError：elm.slider 不是函数）

Posted 2023-05-09

【中文标题】如何在我的应用程序中包含 angular-ui-slider？ （TypeError：elm.slider 不是函数）

【英文标题】：How to include angular-ui-slider into my application? (TypeError: elm.slider is not a function)

【发布时间】：2016-04-04 08:59:55

【问题描述】：

包含 angular-ui-slider 的现代指令是什么？

我做到了

bower install angular-ui-slider --save

然后额外包含

  <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
  <script type="text/javascript" src="bower_components/jquery-ui/ui/jquery.ui.slider.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-slider/src/slider.js"></script>

并且还在app.js中添加了依赖

var pdkApp = angular.module('pdkApp', [
  'ngRoute',
  'pdkControllers',
...
  'ui.slider'
]);

但出现以下错误：

TypeError: elm.slider is not a function
    at init (slider.js:45)
    at slider.js:54
    at angular.js:7478
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.$apply (angular.js:16160)
    at done (angular.js:10589)
    at completeRequest (angular.js:10787)
    at XMLHttpRequest.requestLoaded (angular.js:10728)

【参考方案1】：

什么时候加载 angular.js？你需要在slider.js之前加载它

<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-slider/src/slider.js"></script>

示例： http://jsfiddle.net/6xta5pd0/

【讨论】：

我以前做过。从哪里知道所有这些要求？

现在可以用了吗？如果明确指定 jquery，则必须在加载 angular.js 之前加载 jquery，并且必须在所有其他 angular 库之前加载 angular.js。

好的。你可以更新小提琴并重现行为。

正在尝试...关于你的小提琴:) 怎么能写出这么简单的函数作为一个控制器？我正在写类似pdkControllers.controller('MealCtrl', ['$scope', '$rootScope', '$http', '$location', function ($scope, $rootScope, $http, $location) $scope.hourRange = [0, 24];...

的东西

这称为“隐式注释”。在这里搜索它：docs.angularjs.org/guide/di 如果你缩小你的 js 源，你会遇到角度依赖注入的问题。但是有像 ng-annotate 这样的工具可以帮助你。此外，我可以推荐 John Papas 风格指南。太棒了：github.com/johnpapa/…