Регулятор jQuery - Проблемы с рендерингом

Question

Я пытаюсь использовать ручку jquery в угловых, и я создал директиву, чтобы использовать его.

Теперь я видел много примеров jquery knob, и в большинстве из них текущее значение отображается в центре циферблата... но не в моем случае! А также, как я могу установить номера, которые будут без десятичных?

Вот мой HTML и угловой код директивы:

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 в середине)

Спасибо заранее

РЕДАКТИРОВАТЬ

Как и предполагалось, я заменил ручку jquery на roundSlider, но у меня есть пара проблем, которые можно найти здесь: http://jsbin.com/doketasuju/edit?html,output

1) Почему у меня белый фон в стиле "ромбовидной формы", который мне не нужен?

2) Если я что-то наберу на входе, это не работает!

Это пример того, как я собираюсь использовать его, но мне нужно сначала исправить эту пару проблем. Спасибо

РЕДАКТИРОВАТЬ 2

Как то так добавить ярлыки:

И он, очевидно, должен отображать минимальное и максимальное значения из атрибутов ползунка

Answer 1

Для РЕДАКТИРОВАНИЯ 2:

В настоящее время нет встроенной опции для поддержки меток. Но вы можете достичь этой функциональности, используя внутренний код. Проверьте ниже демо:

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

Здесь, регулируя значения полей для .num1 span а также .num2 span классы вы можете разместить метку.

Демо с полуслайдером: http://jsbin.com/tamumo/edit?html,output

Answer 2

Я выполнил ваше требование с помощью плагина jQuery roundSlider.

Он поддерживает угловое связывание встроенным, поэтому нет необходимости создавать внешнюю директиву для этого.

Пожалуйста, проверьте демо здесь:

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

Более подробную информацию о roundSlider можно найти на странице демонстраций и документации.

Надеюсь, это поможет вам...

редактировать

1) Установив ползунок в цвет, соответствующий фону, вы можете решить эту проблему.

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

2) Решил проблему при использовании директивы.

Обновленная демоверсия: http://jsbin.com/puwefi/edit?html,output