转换jQuery UI的滑块小部件AngularJS指令 [英] Convert jQuery UI slider widget to AngularJS directive

问题描述

我想建立一个创建键盘可访问滑块控件的角度指令。我发现在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.

http://jsfiddle.net/xB6c2/121/

我想要做类似这样的滑块控件的东西。谢谢！

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指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！