Javascript 无法与Gridster正确绑定

所以我同时使用Angular和Gridster框架，但我有一个问题：

使用Gridster，我实现了一个按钮，允许用户添加（和删除）面板，如下所示：

$(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);

});

$（文档）。在（“单击”，“添加服务”，函数（）{
var gridster=$（“.gridster ul”）.gridster（）.data（'gridster'）；
gridster.add_小部件（'
{{2+3}
'，2,1）；
});

从技术上讲，我认为这应该是可行的，但是当我测试它时，角度不显示'5'，而是显示为{{2+3}}'，因此没有正确绑定

你知道为什么会这样吗？如果我在项目中的其他地方绑定Angular，它会正常工作，只是不在这个函数中。我在Gridster后面加载Angular。

---

谢谢你的建议

正如我在评论中提到的，您可能需要将其包装在指令/组件中，并对gridster容器使用

$compile

服务。根据我对gridster的理解，调用

add_widget

很可能需要您对其进行

$compile

但是已经有了一个angular gridster模块。看看-

[编辑]

---

最后，我在没有angular gridster模块的情况下制作了一个工作示例。显然存在一些样式问题

你用5代替2+3怎么样？这些变量是静态的还是静态的？因此，无论何时，当您向angular应用程序动态添加DOM时，通常都需要使用

$compile

服务对其进行编译。您可能需要在angular指令/组件中添加gridster代码，以查看渲染是否正确。@FarzadSalimiJazi从技术上讲，我将加载一个包含不同HTML的指令，2+3只是测试angular连接的一种方法，如果它绑定的话。@jusopi Ok还没有看到这一点，我会查出来的谢谢。谢谢你的回答。我试图将$compile放在指令和包含add_小部件的函数中，但它似乎没有什么区别。请提供一个如何在指令中正确编译的快速代码示例？我以前从未使用过$compile。我可以&将会，然而，有没有一个原因让你不去使用angular gridster模块呢？因为：a-我不熟悉使用bower来安装框架，在尝试框架之前必须先了解这一点，这不是一个问题，但是：b-我仍然想看看$compile是如何在我从未使用过的上下文中使用的在此之前，我强烈建议您学习bower和npm，因为一旦您扩展了知识库，您的项目可能会增加复杂性，并且您不会希望在每次需要新功能时“重新发明轮子”。使用这两种方法都很简单。就我的2美分。学习使用$compile非常有用，因为您可以使用它扩展到基本指令之外。很高兴这个答案对你有用。是的，谢谢你给我的选择，我感谢你的回答！