如何在AngularJS中实现jQuery范围滑块

Wat*_*att 10 javascript slider angularjs angularjs-directive

我试图在我现有的AngularJS应用程序中使用anuglar-slider.

我在这里跟踪了作者的评论

我从作者的github下载了以下文件(在Head标签中)并添加到我的 index.html

HTML代码:

<head>  

<link rel="stylesheet" href="css/angular-slider.css">
<script src="js/vendor/angular-slider.js"></script>

</head>
<body>

  <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider>

</body>   
Run Code Online (Sandbox Code Playgroud)

App.js(角度代码).我根据作者的指示添加了第二行,我怀疑我确实在那里做错了

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

app.constant('Config',
{
    baseURL : "http://blah",
    httpTimeout : 36000
});
app.config(function($logProvider) {
    $logProvider.debugEnabled(true);
});
 //and some other app specific code follows
Run Code Online (Sandbox Code Playgroud)

我在浏览器中看不到任何滑块渲染.但是,应用程序中较旧的Angular特定功能仍然有效,浏览器控制台中没有错误.

如果您在上面找不到问题,请随时在AngularJS应用程序中建议任何其他方法来实现范围滑块.

我是AngularJS的新手

如果您希望我在这里发布作者的库文件代码,请告诉我.

Woo*_*aSh 9

好的,我在准备这个时发现了一些麻烦,但现在它正在工作:

成立的麻烦:

  • 它需要angularjs版本 1.1.4 or higher
  • 你需要有slider-template.html文件
  • 和@Pascal说你需要包括uiSlider:

    var app = angular.module('myApp', ['uiSlider'])
    
    Run Code Online (Sandbox Code Playgroud)
  • 我为你准备了下面的工作演示.我希望它会对你有所帮助

DEMO

  • 我为你编辑了DEMO.范围从0到1,步长为0.1.请检查并告诉我它是否正常. (2认同)