Knob http://anthonyterrien.com/knob

Knob is a jQuery plugin that is canvas based and doesn’t use any jpg or png sprites. It has touch, mousewheel, keyboard events implemented.

Base

Without input

"cursor" mode

Display previous value

Angle offset

Angle offset and arc

4-digit, step 0.1

Responsive

Readonly

See the usage documentation at http://anthonyterrien.com/knob

Usage


require(['jquery', 'px/extensions/jquery.knob'], function($) {
  ...
});

Usage

To use knob plugin, you need to include the next scripts:


<script src="path/to/js/libs/jquery.knob.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-knob.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['angular-knob']);

Alternatively, you can include knob plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'angular-knob',
    files: [
      'path/to/js/libs/jquery.knob.js',
      'path/to/js/pixeladmin/directives/angular-knob.js',
    ],
  },
]);

knob directive

knob directive requires ngModel to be on the element.

You can use knob directive on input elements. And when the scope is destroyed the directive will be destroyed.

Options

knob's options can be specified as data-* attributes (see the plugin's documentation).

Hooks

Hooks can be bound using attributes (see the plugin's documentation):

  • on-cancel
  • on-change
  • on-draw
  • on-format
  • on-release

<input knob ng-model="knobModel" type="text"
       on-cancel="ctrl.cancel"
       on-change="ctrl.change">
        

function SomeController() {
  this.cancel = function() { ... };
  this.change = function(v) { ... };
});