Angular UI-Slider

Question

民间，

我正在尝试使用此处的angular-ui滑块：https://github.com/angular-ui/ui-slider

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

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

任何人都知道我在这里缺少什么？

这是一个傻瓜：

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

在AngularJS中使用jQuery时，包含脚本的顺序很重要。

FAQ并不完全清楚

  

Angular是否使用jQuery库？

     

是的，Angular可以使用jQuery，如果它存在于你的应用程序中   应用程序正在被引导。如果你的jQuery不存在   脚本路径，Angular回归到自己的实现   我们称之为jQLite的jQuery子集。

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

Answer 2

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

确保您拥有：

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

Answer 3

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

elm = $(elm)

从那时起，elm就拥有了 slider（）方法。

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