I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
我想创建一个angularjs小部件，可以使用最少的代码嵌入第三方网站
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
或类似的。
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
我找到了一些资源，例如本文用于使用jquery http://alexmarandon.com/articles/web_widget_jquery/开发小部件。
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
如何使用Angularjs完成？有什么聪明的方法可以利用诸如指令/观点等角度特征来达到这个目的？有什么问题？请您的想法/建议/意见/经验。
2 个解决方案
#1
6
You should also keep in mind the possibility that the 3rd party website also uses angular, and potentially a different version. Check Multiple versions of AngularJS in one page
您还应该记住，第三方网站也可能使用角度，可能是不同的版本。在一个页面中检查AngularJS的多个版本
#2
1
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.
这似乎对我有用。在脚本中，我将Container div的innerHTML属性设置为angular视图标记代码。关键点是在页面加载后使用angular。$ bootstrap手动引导应用程序。我没有看到创建指令有任何特殊价值。指令需要是视图代码的一部分，仍然需要使用innerHTML将其分配给容器。
#1
6
You should also keep in mind the possibility that the 3rd party website also uses angular, and potentially a different version. Check Multiple versions of AngularJS in one page
您还应该记住，第三方网站也可能使用角度，可能是不同的版本。在一个页面中检查AngularJS的多个版本
#2
1
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.
这似乎对我有用。在脚本中，我将Container div的innerHTML属性设置为angular视图标记代码。关键点是在页面加载后使用angular。$ bootstrap手动引导应用程序。我没有看到创建指令有任何特殊价值。指令需要是视图代码的一部分，仍然需要使用innerHTML将其分配给容器。