我正在尝试构建一个 Angular 指令来创建一个可通过键盘访问的 slider 小部件。我在 Github 上发现了几个 Angular slider ,但它们都无法通过键盘访问。因此,我尝试将 jQuery UI slider 转换为 Angular 指令。
以下是我在没有 Angular 的情况下构建小部件的方法。
HTML:
<div id="slider"></slider>
<input type="text" id="amount"/>
Javascript:
$("#slider").slider({
min: 1,
max: 10,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
这就是我希望 Angular 指令工作的方式:
<slider min="1" max="10" ng-model="sliderValue"/>
<input type="text" ng-model="sliderValue"/>
作为示例,这里有一个 jsFiddle,它展示了如何将 jQuery UI 日期小部件转换为 Angular 指令。
http://jsfiddle.net/xB6c2/121/
我想为 slider 小部件做类似的事情。谢谢!
最佳答案
这是一个有效的解决方案。感谢Duc Hong - 他的回答对帮助我解决这个问题很有帮助。如果有更好的方法,请告诉我。
app.directive('slider', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
element.slider({
value: scope[attrs.ngModel],
min: parseInt(attrs.min),
max: parseInt(attrs.max),
step: parseFloat(attrs.step),
slide: function(event, ui) {
scope.$apply(function() {
scope[attrs.ngModel] = ui.value;
});
}
});
}
};
});
关于jquery - 将 jQuery UI slider 小部件转换为 AngularJS 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25550379/