javascript - 将 ng-include 用于原始(或编译)HTML 还是模板 URL？

Question

假设我有一个模板，其中包含一个带有 ng-include 指令的元素:

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

我正在尝试将我们所有的模板简化为我们构建的应用程序 JS(使用 browserify 和 brfs 转换)，从概念上讲，它看起来像:

<div ng-include src="fs.readFileSync('./templates/top-promo-content.html', 'utf8')"></div>

这最终会导致:

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

除了在 ng-include 中使用模板 URL 之外，还有什么方法可以使用原始或编译后的 HTML 吗？如果没有，是否有另一种 Angular 替代方法可以让我完成这个，无论是作为某种包含还是部分，但能够包含原始/编译的 HTML？

Answer 1

我自己花了几天时间，使用 $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 重新捆绑并使用新模板进行实时刷新。