Angular 未与 Gridster 正确绑定

Question

所以我同时使用 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);

});

从技术上讲，我认为这应该可行，但当我对其进行测试时，Angular 不显示“5”而是显示为“{{2 + 3 }}”，因此无法正确绑定。

知道为什么会这样吗？如果我在项目的其他地方绑定 Angular 它可以正常工作，只是不在此函数内。我在 Gridster 之后加载 Angular。感谢您的任何建议！

Answer 1

正如我在评论中提到的，您可能需要将其包装在 directive/component 中并针对 gridster 容器使用 $compile 服务。根据我对 gridster 的了解，调用 add_widget 很可能还需要您 $compile 反对它。

但是已经有一个 angular-gridster 模块可用。检查一下 - https://www.npmjs.com/package/angular-gridster

[编辑]

我最终做了一个没有 angular-gridster 模块的工作示例。显然存在一些样式问题。 http://codepen.io/jusopi/pen/mOjOXL?editors=1010

Angular 未与 Gridster 正确绑定

Angular not binding correctly with Gridster

javascript

angularjs

gridster

[编辑]