Gridster jQuery plugin for AngularJS ng-repeat content

Question

I am trying to integrate Gridster using AngularJS, but without much success.

Reading the documentation for the Angular UI ui-jq , it seems that this (check fiddle) should work. But when I look a little further with the Chrome debugger, it turns out that on this line it does not detect any children at all.

I suspect that somewhere in the ng-repeat directive AngularJS decides to rip out the part that will be repeated, and I understand why, but that does not solve my problem. I would welcome any hint that would help me get a little further.

Update 1

I began to turn it into a directive, hoping that this would improve the situation. However, nested ng-repeat also interferes with the homegrown directive. I tried deferring the jQuery plugin connection until I could ( $evalAsync ), and eventually used $timeout . This is the only way to make it work.

Update 2

I think that the original approach would never give me what I needed. So a special directive is implemented. See my answer below.

Answer 1

In the end, I wrote my own directives. I needed to be sure that every change in the underlying data would be seen by the setter, but at the same time I did not want to write my own monitoring in the data model and replace everything that you usually do in the retina, with a directive that hides all this . (This will be due to the implementation of most of ng-repeat inside the directive itself.)

This is what I have (and suppose "foo" is the name of my module):

 foo.directive "gridster", () -> { restrict: "E" template: '<div class="gridster"><div ng-transclude/></div>' transclude: true replace: true controller: () -> gr = null return { init: (elem) -> ul = elem.find("ul") gr = ul.gridster().data('gridster') return addItem: (elm) -> gr.add_widget elm return removeItem: (elm) -> gr.remove_widget elm return } link: (scope, elem, attrs, controller) -> controller.init elem } foo.directive "gridsterItem", () -> { restrict: "A" require: "^gridster" link: (scope, elm, attrs, controller) -> controller.addItem elm elm.bind "$destroy", () -> controller.removeItem elm return } 

With this, I can create a grid-generated view by adding the following:

 <gridster> <ul> <li ... ng-repeat="item in ..." gridster-item> <!-- Have something here for displaying that item. --> <!-- In my case, I'm switching here based on some item properties. --> </li> </ul> </gridster> 

Whenever items are added or removed from the collection observed in the ng-repeat directive, they will automatically be added and removed from the view controlled by the grid.

EDIT

Here is a plunk demonstrating a slightly modified version of this directive:

 angular.module('ngGridster', []); angular.module('ngGridster').directive('gridster', [ function () { return { restrict: 'E', template: '<div class="gridster"><div ng-transclude/></div>', transclude: true, replace: true, controller: function () { gr = null; return { init: function (elem, options) { ul = $(elem); gr = ul.gridster(angular.extend({ widget_selector: 'gridster-item' }, options)).data('gridster'); }, addItem: function (elm) { gr.add_widget(elm); }, removeItem: function (elm) { gr.remove_widget(elm); } }; }, link: function (scope, elem, attrs, controller) { var options = scope.$eval(attrs.options); controller.init(elem, options); } }; } ]); angular.module('ngGridster').directive('gridsterItem', [ function () { return { restrict: 'EA', require: '^gridster', link: function (scope, elm, attrs, controller) { controller.addItem(elm); elm.bind('$destroy', function () { controller.removeItem(elm); }); } }; } ]); 

Answer 2

If you want, you can try and flip your own wrapper for the grid. Last night I spent most of the night, and it was a bit vague. The way serialization of serialization is not simple, etc. In any case, I came across this project and it works very well.

https://github.com/ManifestWebDesign/angular-gridster

I could not find an online demo, so I did this:

http://plnkr.co/edit/r5cSY1USjtr2bSs7rvlC?p=preview

Answer 3

This will be fixed in the next version.

https://github.com/angular-ui/angular-ui/pull/347

The new deferred attribute will take care of the problem as soon as I can understand why the stupid unit tests fail.

Answer 4

There is also an Angular Gridster .

This question went through it, exploring the implementation of the Gridster in Angular.