0

I'm trying to use a jquery knob in angular, and i've created a directive in order to use it.

Now, i've seen many jquery knob examples, and in most of them, there's the current value displayed in the centre of the dial...but not in my case! And also, how do i set the numbers to be WITHOUT DECIMALS?

Here's my html and angular directive code:

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");
                };
            }
        };
    });

Here's how it looks on the browser:

enter image description here

And here how i'd like it to be (not talking about the color, but about the value displayed as INT in the middle)

enter image description here

Many thanks in advance

EDIT

As suggested, i replaced jquery knob with roundSlider, but i have a couple of issue that can be found here: http://jsbin.com/doketasuju/edit?html,output

1) Why do i have white background in a "diamond shape" style that i don't want?

2) If i type something in the input, it's not working!

This is an example on how i'm going to use it, but i need to fix this couple of issues first. Thanks

EDIT 2

Something like this to add labels:

enter image description here

And it should obviously display min and max values from the slider attributes

Soundar
  • 2,569
  • 1
  • 16
  • 24
Nick
  • 13,493
  • 8
  • 51
  • 98
  • The problem is due to, the knob should rendered by input element (which displayed in center).. But here the "knob" tag was used (custom tag for directive).. so need to change the binding based on this.. Are you need the solution with knob or you can compatible with any other plugin ? – Soundar Jan 23 '16 at 17:10
  • Any circular slider will do – Nick Jan 23 '16 at 17:36
  • Is the below answer helps you or you need any other functionality ? – Soundar Jan 25 '16 at 11:23
  • No not really...i used this plugin before, and then i changed to knob. I know that knob should work in angular, as seen in this video example here: https://www.youtube.com/watch?v=nz8lAKHBgJY. I'm doing the same thing as he does, but i have decimals and he has not and i cannot figure out why – Nick Jan 25 '16 at 11:29

2 Answers2

1

I have achieved your requirement with jQuery roundSlider plugin.

It supports the angular binding by inbuilt, so no need to create the custom directive externally for this.

Please check the demo from here:

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

For more details about roundSlider check the demos and documentation page.

Hope it helps you ...

Edit

1) By setting the slider bg color corresponding to the background you can solve this.

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

2) Solved the issue while using the directive.

Updated Demo: http://jsbin.com/puwefi/edit?html,output

Soundar
  • 2,569
  • 1
  • 16
  • 24
  • Ok, i'm going to use your example. I cannot spend a lot of time on this. Thanks a lot. – Nick Jan 25 '16 at 15:10
  • Actually, i have a couple of issues with your example...please see my edited question. – Nick Jan 25 '16 at 15:27
  • You are the best! thanks a lot for all your patience and help! – Nick Jan 26 '16 at 08:28
  • Last quick question, i checked the documentation but i wasn't able to find it...do you know if there's an option that allows you to add labels (like 0 at the start of the circle and 100 at the end)? Or do i have to do it myself? thanks – Nick Jan 26 '16 at 08:37
  • label means, are you need to add the number outside the circle ah ? – Soundar Jan 26 '16 at 08:39
1

For EDIT 2:

Currently there is no inbuilt option for label support. But you can achieve that functionality by using the internal code. Check the below demo:

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

Here by adjusting the margin values for .num1 span and .num2 span classes you can position the label.

Demo with half slider: http://jsbin.com/tamumo/edit?html,output

Community
  • 1
  • 1
Soundar
  • 2,569
  • 1
  • 16
  • 24