An Angular Gridster.js directive
4 people use it
Author: 718513? tmrudick


An Angular directive for Gridster.

More documentation available here.


bower install

gridster Directive

Holds grid-wide options and callbacks and instantiates Gridster. Also, it exposes a gridster function which can be used to access the Gridster API directly. The can be especially useful when resizing or removing widgets from subdirectives.


All parameters are optional.

  • gridster - (String) JSON encoded Gridster options object.

  • gridster-changed - (Expression) function which takes a parameter named serialized which will be called whenever the serialized version of the grid changes due to resize or drag.

  • gridster-editable - (Expression) expression which evaluates to a boolean value indicating if the grid should be editable. If false, resizing and reordering is disabled.

gridsterRepeat Directive

Stripped down version of ngRepeat which will repeat DOM elements once and then hand off all DOM manipulation off to Gridster. Additional items can be added via the Gridster API.

This directive will NOT watch the collection for changes after elements have been added. I ran into many problems with using ngRepeat and Gridster. Specifically around removing elements from the grid.

Unlike ngRepeat, gridsterRepeat will only iterate over Arrays.

Similarly to ngRepeat, gridsterRepeat exposes all of the same $index, $last, etc scope variables.


  • gridsterRepeat - (Expression) '_item_ in collection' expression where item is an identifier and collection is an Array on the scope.

  • gridster-layout - (Expression) expression which evaluates to an array of serialized positions (from the Gridster serialize method) or a single object from that array (using something like layout="grid[$index]").

Using the Gridster API directly

It is possible to use the underlying Gridster API from a sub-directive.

comments powered by Disqus
This page was last updated over 4 years ago.