2

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!

Whirlwind991
  • 485
  • 5
  • 17
  • Whay dont you use just 5 instead of 2+3 ? Are these variables or static? – Farzad Salimi Jazi Dec 08 '16 at 05:11
  • 1
    So anytime you dynamically add DOM to an angular app, you usually need to compile it using the `$compile` service. You may need to add the gridster code inside an angular directive/component to see if render correctly. – jusopi Dec 08 '16 at 05:12
  • @FarzadSalimiJazi Well technically I'm going to be loading a directive containing different HTML, the 2 + 3 is just a way of testing Angular connection, if it binds at all. – Whirlwind991 Dec 08 '16 at 05:33
  • @jusopi Ok haven't had a look at that yet, will check it out thanks. – Whirlwind991 Dec 08 '16 at 05:33

1 Answers1

1

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

Community
  • 1
  • 1
jusopi
  • 6,791
  • 2
  • 33
  • 44
  • I appreciate the answer. I'm attempting to put $compile within the directive and the function containing add_widget but it doesn't seem to make a difference. May you provide a quick code example of how to compile it within a directive correctly please? I've never had to use $compile before. – Whirlwind991 Dec 08 '16 at 22:52
  • I can & will, however is there a reason you wouldn't just go with the angular-gridster module already available? – jusopi Dec 09 '16 at 17:59
  • 1
    because: a - I'm not familiar with using bower to install frameworks and would have to learn that first before trying the framework which isn't an issue but also: b - I would still like to see how $compile is used within a context as I've never used it before – Whirlwind991 Dec 11 '16 at 22:11
  • I highly recommend learning both bower and npm seeing as once you expand your knowledge base, your project will probably increase in complexity and you'll not want to "reinvent the wheel" every time you need a new feature. Using both are trivial. Just my 2¢. Learning to use $compile is very useful as you can expand beyond basic directives with it. Glad the answer worked for you. – jusopi Dec 12 '16 at 14:37
  • yes thanks for showing my the options, I appreciate your answer! – Whirlwind991 Dec 12 '16 at 22:11