有角度的:如何在< pre>中嵌套模板标签? [英] angular: how to nest templates inside <pre> tags?
问题描述
有人知道我如何从"pre"标签中进行ng-include吗?用例是,我有一个包含一些代码块的网站,并且某些代码块包含要移至单独部分的通用代码.示例:
does anyone know how do I do ng-include from within a 'pre' tag? The usecase is that I have a website with some code blocks and some of the code blocks contain common code that I want to move to a separate partial. Example:
<pre>
My page-specific code....
<ng-include src="'partials/common-code.html'"></ng-include>
</pre>
不用说,这是行不通的,因为ng-include标记实际上出现在输出中...
Needless to say, this does not work, as the ng-include tag appears literally in the output...
推荐答案
您可以使用两个指令:一个是一种ngInclude,另一个则等待第一个加载内容并将其自身替换为pre
( http://plnkr.co/edit/fPy4M0ZK94erF31EeObE ):
You can do with a two directives: one is a sort of ngInclude, the other waits for the first to load the content and replaces itself with a pre
(http://plnkr.co/edit/fPy4M0ZK94erF31EeObE):
module.directive('myPre', function() {
return {
controller: function() {},
restrict: 'E',
link: function(scope, element, attrs, controller) {
controller.checkContent = function() {
if (!element.children().length) {
element.replaceWith('<pre>' + element.text() + '</pre>');
}
}
}
}
})
.directive('myPreTemplate', function($http) {
return {
require: '^myPre',
restrict: 'E',
link: function(scope, element, attrs, myPre) {
$http.get(attrs.src).then(function(res) {
element.replaceWith(res.data);
myPre.checkContent();
});
}
}
});
您可以在此处使用它:
<my-pre>
Code here...
<my-pre-template src="common.html"></my-pre-template>
...and here...
<my-pre-template src="common.html"></my-pre-template>
...and here again
</my-pre>
编辑:呈现通用模板的内容,最好的方法是使用小胡子(插件已更新):
EDIT: to render the content of common template, the best way is using mustache (plunker updated):
...
$http.get(attrs.src).then(function(res) {
var rendered = Mustache.render(res, scope);
element.replaceWith(rendered);
myPre.checkContent();
});
...
这篇关于有角度的:如何在< pre>中嵌套模板标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!