正确包含Angular指令的模板

Question

我正在写一个需要模板的Angular指令。 通过将模板本身嵌入源代码中的<script type="text/ng-template">或通过在指令的配置中提供url（例如templateUrl: "/path/to/template.html" ，可以在Angular中加载templateUrl: "/path/to/template.html" 。

对于第三方指令，第一种方法是完全不可接受的，因为人们不会npm install我的指令，然后执行include("node_modules/mydirective/template.html") （或等效方法），所以感觉很脏。

第二种方法由于相同的原因而行不通。 该模板将位于node_modules目录中，该目录在打包/部署网站后不可公开访问。

我的想法是允许开发人员仅以包含指令本身的相同方式包含模板：

<script type="text/javascript" src="/path/to/directive.js"></script>
<script type="text/ng-template" src="/path/to/directive.html"></script>

问题是第二行不起作用（浏览器会抱怨意外字符，我想是因为它仍然尝试将提取的内容解析为JS。

我发现使用ng-include代替script src实际上会获取模板。 这样做的问题是，在获取模板时，我的指令已经运行了link函数并崩溃了（因为找不到模板）。

有什么方法可以将我的指令延迟到提取模板之前，还是提供任何合理的方式加载模板？

Answer 1

仅使用模板而不是templateUrl进行内联模板处理呢？ 如果它是一个库，我觉得这是捆绑指令和模板进行分发的最简单方法

Answer 2

延迟对指令进行评估的一种方法是编写一个包装指令，该指令对模板进行请求，然后$ compile并将初始指令附加到请求回调中的页面。 仍然，不是那么漂亮。