jQuery旋钮-渲染问题

Question

我试图在角度使用jquery旋钮，并且我已经创建了一个指令才能使用它。

现在，我看到了许多jquery旋钮示例，并且在大多数示例中，表盘中央显示了当前值...但在我的情况下却没有！ 而且，我如何将数字设置为不带小数？

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

的HTML

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

旋钮

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，输出

1）为什么我不想使用“菱形”样式的白色背景？

2）如果我在输入中输入内容，则无法正常工作！

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

编辑2

像这样添加标签：

并且显然应该显示滑块属性的最小值和最大值

Answer 1

我已经通过jQuery roundSlider插件达到了您的要求。

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

请从此处查看演示：

http://jsbin.com/yoboruquvo/edit?html，输出

有关roundSlider的更多详细信息， 请查看演示和文档页面。

希望它可以帮助您...

编辑

1）通过设置与背景相对应的滑块bg颜色，可以解决此问题。

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

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

更新的演示： http : //jsbin.com/puwefi/edit?html，输出

Answer 2

对于编辑2：

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

http://jsbin.com/gazara/1/edit?html，输出

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

带有半滑块的演示： http : //jsbin.com/tamumo/edit?html，输出