jquery - 将 jQuery UI slider 小部件转换为 AngularJS 指令

Question

我正在尝试构建一个 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 小部件做类似的事情。谢谢!

Answer 1

这是一个有效的解决方案。感谢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;
                    });
                }
            });
        }
    };
});