Search code examples
javascriptangularjsgridster

Angular not binding correctly with Gridster

So I'm using both Angular and the Gridster frameworks but I'm having this issue:

With Gridster, I've implemented a button that allows the user to add (and remove) panels like this: 

$(document).on("click", "#addservice", function () {

var gridster = $(".gridster ul").gridster().data('gridster');

gridster.add_widget('<li class="gs_w" data-row="1" data-col="1"
data-sizex="4" data-sizey="3">{{ 2 + 3}}</li>', 2, 1);

});

Technically I would think this should work but when I test it the Angular doesn't display '5' but instead as '{{2 + 3 }}' therefore not binding correctly.

Any ideas why this is the case? If I bind Angular elsewhere in the project it works correctly, just not within this function. I am loading Angular after Gridster. Thanks for any advice!

Solution

  • As I had mentioned in the comments, you probably need to wrap this in a directive/component and use the $compile service against the gridster container. And based on what I understand of gridster, calling add_widget will most likely require you to $compile against that as well.

    But there is already an angular-gridster module available. Check it out - https://www.npmjs.com/package/angular-gridster

    [EDIT]

    I ended up making a working example of this without the angular-gridster module. There are some styling issues obviously. http://codepen.io/jusopi/pen/mOjOXL?editors=1010