如何使用 AngularJs 构建一个嵌入第三方网站的小部件？答案

【问题标题】：How to build a widget to embed in third-party websites using AngularJs?如何使用 AngularJs 构建一个嵌入第三方网站的小部件？
【发布时间】：2013-09-15 23:45:30
【问题描述】：

我想用最少的代码创建一个可以嵌入第三方网站的angularjs小部件，例如

<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>

或类似的。

我找到了一些资源，例如这篇文章，用于使用 jquery http://alexmarandon.com/articles/web_widget_jquery/ 开发小部件。

如何使用 Angularjs 完成？有哪些巧妙的方法可以利用指令/视图等角度特征来达到这个目的？如果有的话，有什么问题？请提出您的想法/建议/意见/经验。

【问题讨论】：

我相信您可以使用 AngularJS 中的指令来实现这一点。这几乎就是 Angular-UI (angular-ui.github.io) 所做的。他们巧妙地使用了与指令捆绑在一起的模板。看看他们的开源代码。由于您的小部件将基于 AngularJS，您仍然需要包含 AngularJS 主文件（就像您需要为 jQuery 插件添加 jQuery）。

标签： javascript jquery angularjs widget angularjs-directive

【解决方案1】：

您还应该记住，第 3 方网站也可能使用 Angular，并且可能是不同的版本。检查Multiple versions of AngularJS in one page

【讨论】：

【解决方案2】：

这似乎对我有用。在脚本中，我将 Container div 的 innerHTML 属性设置为角度视图标记代码。关键是在页面加载后使用 angular.$bootstrap 手动引导应用程序。在创建指令时，我没有看到任何特定的价值。指令需要是视图代码的一部分，仍然需要使用 innerHTML 将其分配给容器。

【讨论】：