问题描述
我想建立一个创建键盘可访问滑块控件的角度指令。我发现在Github上几个角滑块,但他们都不是键盘访问。所以,我想对jQuery UI的滑块转换为角度指令。
I'm trying to build an Angular directive that creates a keyboard-accessible slider widget. I found several Angular sliders on Github, but none of them are keyboard-accessible. So, I'm trying to convert the jQuery UI slider to an Angular directive.
下面是我怎么想打造小部件无角。
Here is how I'd build the widget without Angular.
HTML
<div id="slider"></slider>
<input type="text" id="amount"/>
使用Javascript:
Javascript:
$("#slider").slider({
min: 1,
max: 10,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
这是我怎么想的角度指令工作:
And this is how I'd like the Angular directive to work:
<slider min="1" max="10" ng-model="sliderValue"/>
<input type="text" ng-model="sliderValue"/>
作为一个例子,这里是一个的jsfiddle,显示某人如何转换一个jQuery UI日期控件一个角度指令。
As an example, here is a jsFiddle that shows how someone converted a jQuery UI date widget to an Angular directive.
我想要做类似这样的滑块控件的东西。谢谢!
I'd like to do something similar to this for the slider widget. Thanks!
推荐答案
下面是一个有效的解决方案。谢谢德香 - 他的回答是在帮助我摸不着头脑的工具。请让我知道是否有更好的方法来做到这一点。
Here is a solution that works. Thank you to Duc Hong - his answer was instrumental in helping me to figure this out. Please let me know if there is a better way to do this.
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 UI的滑块小部件AngularJS指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!