Show HN: Ng-dial – An Angular.js directive for an interactive dial component | Hacker News Reader

Show HN: Ng-dial – An Angular.js directive for an interactive dial component

gordyd.github.io

25 pointscarsie8 comments

This is pretty sweet. Anyone who wants to avoid a D3 (or even just SVG) dependency would find some good mileage gotten out of native <dial> elements in Angular at http://html5drummachine.com. Although it has a completely different algorithm mapping mouse movement to value scaling. It's debatable which behavior has a better feel to it.

I tried the behavior here for like two seconds and was totally bamboozled by the dial controls. 0/10 wat

I don't think it's exactly a hard and fast rule, but our team does not use the "ng-" prefix for custom components, since the purpose of the ng- prefix is to avoid naming conflicts between Angular builtins and custom directives (and built-in HTML attributes/elements). So it might be good to call this something else, at least in the code.

Author here. Yea I was not sure on the best approach for naming when using the directive in template but when specifying it as a dependency the directive is referenced by `ui.dial`.

+1 on namespacing. You want to pick your own prefix and use in both places - for example: gmd-dial and gmd.dial

'ui' is used by AngularUI: https://angular-ui.github.io/

Otherwise, once the dialer angular component explodes, and AUI comes out with their own competing directive, a client programmer using both yours and AUI's modules will have a problem.

Thx. I'll update accordingly here.

Nice work, and thanks for open-sourcing this!

There seems to be a lot of under-explored potential for building useful, pluggable D3 widgets along these lines. I'd love to see more interactive widgets like this.

Thanks and np.

I think this will continue to be a growing past-time of mine. It would be cool to build a library of such things - interactive visual components for collecting/displaying data. What other types of widgets would you want to see?

Reply on news.ycombinator.com