在html中包含jade答案

【问题标题】：Include jade in html在html中包含jade
【发布时间】：2015-02-10 19:16:00
【问题描述】：

我想在 html 元素中包含一个 jam 脚本（以显示它是 html 的一部分），如下所示：

container.getElement().html('<include src="main.jade"</include>');

但显然包含标签不起作用。我应该使用什么？（我可以使用jquery）

【问题讨论】：

标签： jquery html dom pug

【解决方案1】：

您可以将 Jade 编译成 HTML，而不是使用 DOM 中的某种包含：

var jade = require('jade');

// Compile a function
var fn = jade.compile('string of jade', options);

// Render the function
var html = fn(locals);
// => '<string>of jade</string>'

然后您可以将该 HTML 编译成一些东西，例如 angular.element:

var compiledElement = $compile('<string>of jade</string>')(scope);
someDomElement.append(compiledElement);

您可以使用$rootScope.$new() 创建模拟范围，或通过使用element.scope() 从元素获取范围（或isolateScope），其中元素是一些角度元素。

查看Jade 文档。

【讨论】：

不想使用angularjs怎么办？
哦，明白了，我更新了我的答案。是的，您可以使用 ng-include，或者等效于 $templateCache 来执行包含。但如果你不使用库，你可以使用 AJAX 获取模板，然后使用 Jade 编译它。
客户端无法访问您的main.jade 文件，您需要一个 XMLHttpRequest 来获取它。
我明白了，但我想要的是从客户端调用翡翠文件，服务器会自动编译它。我试过 $(container.getElement()).load('main.jade') 没有成功。我以为会有一个包含标签，我可以在其中添加玉源......
那么你应该可以直接使用ng-include，但是注意ng-include需要一个表达式，所以你的路径需要用这样的引号括起来：@ 987654331@。如果您在服务器端将 Jade 模板编译成 HTML，并且它们在客户端作为给定路径的资产可用，那么该路径也应该适用于 ng-include。