AngularJS Directive for the excellent ShapeShift.js plugin
For a project I’ve been working on for the past two years (extremely cool and still top secret until its release soon), I use the excellent ShapeShift plugin based on jQuery UI to create a Pintrest-like mosaic layout for a bunch of gauges (also a jQuery plugin) on a page for users to view real-time factory data. The app was originally mostly built with jQuery and Bootstrap, but recently I’ve updated part of it to use AngularJS for more structure and easier to read code.
Since I’ve been building the new pieces of the app with Angular, I had to think the “Angular way” and work any/all jQuery plugins into directives.
The ShapeShift plugin examples and code can be found here http://mcpants.github.io/jquery.shapeshift/
So the directive is restricted to an attribute in this case, you can see its usage on the index.html page. I simply call shapeshift() on the element in the linking function of the directive. It has an example of listening to ShapeShift events (the ss-added event in this case) so you can handle them how you want to.
You can check out all the code in the Github repo. Next up is the TechOctave Gauge directive I created. The only problem with sharing that code is you’ll have to purchase your own gauge.js license.