Angular 无法与 Gridster 正确绑定答案

【问题标题】：Angular not binding correctly with GridsterAngular 无法与 Gridster 正确绑定
【发布时间】：2016-12-08 04:59:10
【问题描述】：

所以我同时使用 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。感谢您的建议！

【问题讨论】：

为什么不使用 5 而不是 2+3 ？这些变量是静态的还是静态的？
因此，每当您将 DOM 动态添加到 Angular 应用程序时，您通常需要使用 $compile 服务对其进行编译。您可能需要在 angular 指令/组件中添加 gridster 代码以查看是否正确渲染。
@FarzadSalimiJazi 从技术上讲，我将加载一个包含不同 HTML 的指令，2 + 3 只是测试 Angular 连接的一种方式，如果它完全绑定的话。
@jusopi 好的，还没有看，会检查一下谢谢。

标签： javascript angularjs gridster

【解决方案1】：

正如我在 cmets 中提到的，您可能需要将其包装在指令/组件中，并针对 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

【讨论】：

感谢您的回答。我试图将 $compile 放在指令和包含 add_widget 的函数中，但它似乎没有任何区别。您能否提供一个快速代码示例，说明如何在指令中正确编译它？我以前从未使用过 $compile。
我可以并且愿意，但是您是否有理由不使用已经可用的 angular-gridster 模块？
因为：a - 我不熟悉使用 bower 安装框架，在尝试框架之前必须先了解这不是问题，而且：b - 我仍然想看看 $compile 在我之前从未使用过的上下文中是如何使用的
我强烈建议同时学习 bower 和 npm特征。使用两者都是微不足道的。只是我的2美分。学习使用 $compile 非常有用，因为您可以使用它扩展基本指令之外的内容。很高兴答案对你有用。
是的，感谢您向我展示选项，感谢您的回答！