Just a question: Does Clusterize work with Angular apps?

[litera]

I would like to integrate this superb plugin (that I was thinking to implement myself for a couple of years now) into my Angular app. I would like to implement infinite scrolling of my page and clusterize would help keeping page DOM lean and responsive.

It likely works with angular, but is there any example which steps one has to take, to make it work? I expect I'll have to call some $scope.$apply() manually when clusterize changes content, but maybe there are other concerns as well?

[NeXTs]

Hi

$scope.apply? No, keep it simple :)

You could create directive for this http://jsfiddle.net/0yuu5rx8/

Please note that this example is simplest as is. If you need few instances of clusterize at the same page - keep in mind that elements ID should be unique. (pay attention to id attributes at template field)

[litera]

Ok this example is maybe too simplified because you've created static items that don't do any Angular binding which is not how usual Angular apps work. Your items should at least be some form of Angular templates that consume data model:

<li ng-bind="item.value"></li>

where your directive template would be using ng-repeat to display them. And this would make it more complicated in several aspects.

Your $scope.rows should only include data without markup, and directive should be able to consume it and render it as per its template.

Now suppose that each individual item is an entity instance with several hierarchical properties that also require a more complex view template to get displayed. This means that clusterize would have to redraw the template and let angular render data in the view. Basically how clusterize should work in this regard (to keep it as simple as possible) would be to use ng-repeat on a cluster set of data items. This would make it possible for Angular to only render those items and clusterize would only work and an intermediary between the model (all items) and the view (only cluster subset of items).

I think that could work as long as you can support variable item height...

[NeXTs]

No sense to reinvent the wheel :)

As you need more comprehensive and angular-way solution, better take a look to angular-grid, this might be exactly what are you looking for. demo, repo

[litera]

Reinvent the wheel? I don't get if? Where was I reinventing it?

Angular grid is surely not something I could use because my data is not about tabular data nor do I need all the other features that if has. It's like using a bus for a single person that has to walk one block away...

All I actually need is clusterize behaviour, but I see I might rather implement it for dynamically sized items and Angular-ready from the beginning. The code to implement it isn't so complicated nor long. I'll likely take some hints from your plugin.

Thanks anyway.

[NeXTs]

Sure, go ahead :)

About the wheel - I meant myself, not you. Like, I won't change clusterize to something which behaviour is almost the same as angular-grid's, that's what I meant.

[Thrilleratplay]

I was looking to use Clusterize.js with Angular as well. For anyone looking a way to bind to scope without reinventing the wheel, '"html" is a public prototype function in Clusterize instances. Here is a fiddle with a basic example:

http://jsfiddle.net/thrilleratplay/s1y3780x/

Note: as is, tables in this fiddle will probably not work with <=IE9 because of innerHTML is readonly.