AngularJS：如何在指令中注入或要求第三方库？

Question

我想做的是我自己的角度指令。在这个角度指令中，我需要第三方库。

举一个例子，我想用d3为标签云创建一个指令。

在这种情况下，我可以通过d3访问d3，然后我需要要求库d3.layout.cloud.js

我不想在索引中放入我的应用程序大量脚本，所以我的问题是如何实现这一点？ 我的意思是，只在一个指令中注入一个库的正确方法是什么，或者至少只是在我需要时才加载它 而不是从头开始加载？

由于

Answer 1

您需要动态获取脚本 - 即执行指令时。最基本的方法是使用纯JS。

var js_script = document.createElement('script');
js_script.type = "text/javascript";
js_script.src = "http://www.example.com/script.js";
document.getElementsByTagName('head')[0].appendChild(js_script);

您也可以使用JQuery getScript。

如果您需要使用纯Angular，请使用$http获取脚本，然后使用new Function执行该操作。

注意

请注意，您只能inject角度模块的角度依赖性。你在这里谈论的是只在需要时加载指令所需的脚本。你不能称之为依赖注入。这是懒加载。

Answer 2

要使用库，请在base.html中提供该库的src路径。之后，该库将在整个应用程序中可用，您可以直接使用该库，而无需从任何地方注入或引用它

e.g。

要使用lodash.js库，请在main.html中提供库的srcpath。 在指令，控制器和服务函数中，使用lodash库提供的_（下划线）变量直接使用lodash。

Answer 3

您应该创建一个模块，将第三方库模块注入模块，然后在同一模块中创建自定义指令，只需注入第三方库，您就可以从指令访问第三方库。 （提供者，服务等）直接进入指令。

关于开头没有加载所有内容的部分，您可能会对lazy loading感兴趣。