jQuery旋钮 - 渲染问题

时间:2016-01-23 09:50:10

标签: jquery angular-directive jquery-knob round-slider

我试图在角度中使用jquery旋钮,并且我已经创建了一个指令以便使用它。

现在,我已经看过很多jquery旋钮示例,在大多数情况下,表盘中央显示的是当前值...但不是我的情况! 而且,我如何将数字设置为没有DECIMALS?

这是我的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");
                };
            }
        };
    });

以下是浏览器的外观:

enter image description here

在这里我是多么喜欢它(不是谈论颜色,而是关于中间显示为INT的值)

enter image description here

非常感谢提前

修改

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

1)为什么我的白色背景为&#34;菱形&#34;我不想要的风格?

2)如果我在输入中输入内容,它就不起作用了!

这是我将如何使用它的一个例子,但我需要先解决这几个问题。 感谢

编辑2

像这样添加标签:

enter image description here

显然,它应显示滑块属性的最小值和最大值

2 个答案:

答案 0 :(得分:1)

我已使用jQuery roundSlider插件实现了您的要求。

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

请从这里查看演示:

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

有关 roundSlider 的详细信息,请查看demosdocumentation页。

希望它对你有所帮助......

修改

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

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

2)在使用指令时解决了这个问题。

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

答案 1 :(得分:1)

编辑2:

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

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

通过调整PageNavigation.num1 span类的边距值,您可以定位标签。

使用半滑块进行演示:http://jsbin.com/tamumo/edit?html,output