Javascript 将ng包含与原始（或编译）HTML和模板URL一起使用？

假设我有一个模板，其中包含一个带有

ng include

指令的元素：

<div ng-include src="'templates/top-promo-content.html'"></div>

最终将导致：

<div ng-include src="<ul><li>list item</li></ul>"></div>

---

是否有任何方法可以使用原始或编译的HTML，而不是在

ng include

中使用模板URL？如果没有，在angular中是否有另一种方法可以让我实现这一点，作为某种包含或部分，但能够包含原始/编译的HTML？

模板可以包含在带有

脚本

标记的页面上

<script type="text/ng-template" id="templates/top-promo-content.html">
  <ul><li>list item</li></ul>
</script>

列表项

---

这会将模板放入模板缓存中，

ng include

指令从那里获取模板。每个通过URL获取模板的指令也是如此。

我自己花了几天时间研究这个问题，并使用

$templateCache

找到了一个很好的解决方案

javascript

app.run(['$templateCache', function($templateCache) {
    //Add ng-include templates to template cache
    $templateCache.put('foo.html', require('./templates/foo.html'));
    $templateCache.put('bar.html', require('./templates/bar.html'));
}]);

html

<ng-include="'foo.html'"></ng-include>

这将包括bundle.js中的模板

---

此外，如果您正在运行

watchify

以重新处理；对模板的任何更改都将导致watchify启动重新处理，并启动新模板的实时刷新。

我已经调整了Malkus answer，使其在我的情况下工作：

Javascript:

app.run(['$templateCache', function($templateCache) {
    //Add ng-include templates to template cache
    $templateCache.put('foo.html', fs.readFileSync('/templates/foot.html').toString());
}]);

HTML

<ng-include="'foo.html'"></ng-include>

---

很好

我不知道这能解决我的问题；我试图通过browserify使用require语句将模板简化到构建中。将模板作为HTML直接放在父模板中，并由脚本标记包围，这不允许我这样做。我希望将HTML直接简化为模板include/placeholder，而不是使用include或继续将模板添加到angular的模板缓存中。我将为这个问题添加另一个例子。“foo.html”中到底有什么内容？如果我使用类似“”的HTML代码，则Browserify会失败，并出现以下错误：“>>错误：第1行：意外的标记不要紧，我找到了一个解决方案并将其添加为可能的答案。不过感谢您的指针！@neric foo.HTML是纯HTML。您不使用module.export

<ng-include="'foo.html'"></ng-include>