angularjs - Angular UI-滑块

Question

伙计们，

我正在尝试从这里使用 angular-ui 滑块：https ://github.com/angular-ui/ui-slider

我已经包含了 jquery、jquery-ui 和 angular 文件。我还包含了 css 文件。

但是滑块不会显示在页面上..

有人知道我在这里缺少什么吗？

这是一个plunkr：

http://plnkr.co/edit/w5aQ61wAoP8bbAcAfR5F?p=preview

Answer 1

将 AngularJS 脚本移动到 jQuery 下方。

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="angular.js@1.1.x" src="http://code.angularjs.org/1.1.4/angular.js"></script>

plnkr

将 jQuery 与 AngularJS 一起使用时，包含脚本的顺序很重要。

常见问题解答并不完全清楚

Angular 是否使用 jQuery 库？

是的，如果在引导应用程序时，Angular 存在于您的应用程序中，则 Angular 可以使用 jQuery。如果 jQuery 没有出现在你的脚本路径中，Angular 会退回到它自己的 jQuery 子集实现，我们称之为 jQLite。

翻译基本上是，如果您在角度加载之前包含 jQuery，它将使用该版本。否则它将回退到 jQlite 并忽略后面的任何其他内容。

Answer 2

您可能错过了应用声明中的模块依赖项？

确保你有：

var app = angular.module('myApp', ['ui.slider']);

Answer 3

如果您无法更改脚本的顺序（例如，由于您的构建过程），您可以在指令中修复它。elm变量包含一个 jquery-lite 对象，功能齐全的 jquery 可用作$。所以你可以简单地“升级”榆树：

elm = $(elm)

从那时起，elm 就有了slider()方法。

另外，不要忘记包含滑块的样式，否则它会被隐藏。