Gridster jQuery plugin on AngularJS ng-repeat content going bad

Question

I\'m trying to integrate Gridster with AngularJS, but without too much success yet.

Reading the documentation on Angular UI\'s ui-jq directive, I get the i

Answer 1

I eventually ended up writing my own directives for it. I needed to be sure that every change to the underlying data would be seen by gridster, but at the same time, I didn't want to write my own monitoring on the data model and replace everything you normally do within gridster with a directive that hides all of that. (It would involve implementing most of ng-repeat within the directive itself.)

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

foo.directive "gridster", () -> {
  restrict: "E"
  template: '
'
  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 have a gridster generated view, by adding this:

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

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: '
',
            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);
                });
            }
        };
    }
]);