jQuery 旋钮 - 渲染问题

Question

我正在尝试在 angular 中使用 jquery 旋钮，我创建了一个指令以便使用它。

现在，我看过很多 jquery 旋钮示例，在大多数示例中，当前值显示在表盘中央...但我的情况不是这样！ 还有，如何将数字设置为无小数？

这是我的 html 和 angular 指令代码：

HTML

<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">

knob.js

angular.module('knob', [])
    .directive('knob', function () {
        return {
            restrict: 'E',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {
                element.knob({
                    min: attrs.min,
                    max: attrs.max,
                    thickness: .2,
                    step: .5,
                    angleOffset: -125,
                    displayInput: true,
                    angleArc: 250,
                    change: function (value) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(value);
                        });
                    }
                });
                ngModel.$render = function () {
                    element.val(ngModel.$viewValue).trigger("change");
                };
            }
        };
    });

这是它在浏览器中的样子：

这是我希望的样子（不是在谈论颜色，而是在中间显示为 INT 的值）

非常感谢

编辑

按照建议，我用 roundSlider 替换了 jquery 旋钮，但我有几个问题可以在这里找到： http://jsbin.com/doketasuju/edit?html,output

1) 为什么我有我不想要的 "diamond shape" 风格的白色背景？

2) 如果我在输入中输入一些东西，它不起作用！

这是我将如何使用它的示例，但我需要先解决这两个问题。 谢谢

编辑 2

像这样添加标签：

而且它应该明显显示滑块属性的最小值和最大值

Answer 1

我已经通过 jQuery roundSlider 插件实现了你的要求。

它支持 angular 内置绑定，因此无需为此在外部创建自定义指令。

请从这里查看演示：

http://jsbin.com/yoboruquvo/edit?html,output

有关 roundSlider 的更多详细信息，请查看 demos and documentation 页面。

希望对你有帮助...

编辑

1) 通过设置与背景对应的滑块bg颜色可以解决这个问题。

.rs-bg-color { background: gray; }

2) 解决了使用指令时的问题。

更新演示：http://jsbin.com/puwefi/edit?html,output

Answer 2

对于编辑 2：

目前没有标签支持的内置选项。但是您可以通过使用内部代码来实现该功能。查看以下演示：

http://jsbin.com/gazara/1/edit?html,output

在这里，通过调整 .num1 span 和 .num2 span 类 的边距值，您可以定位标签。

半滑块演示：http://jsbin.com/tamumo/edit?html,output