javascript - Mustache.js 到 Angular.js，Angular 中的三重支撑？

Question

我在 Mustache.js 中有以下内容:

<div>{{{icon.tmpl}}}</div>

icon.tmpl 本身就是一个模板，包含以下内容:

<div id="{{id}}" class="glyphicon glyphicon-send"></div>

在 Mustache.js 中，多亏了三重支撑，这完美地工作，两个级别的模板都被编译。现在我无法在 Angular.js 中完成这项工作。第二个嵌入式模板没有被编译，而是被引号“...”包围

如何在 Angular 中实现这一点？

Answer 1

您可以使用 ngInclude 或创建一个指令。这是一个图标指令的示例，它基本上只是替换任何 icon包含您指定的 div 信息的元素。

http://plnkr.co/edit/NK5bOFvsgpMGeTkteMif?p=preview

html:

<icon></icon>

js:

app.directive('icon', function ( $compile, $timeout) {
        return {
            restrict: 'EA',
            replace: true,
            template: '<div id="{{id}}" class="glyphicon glyphicon-send"></div>'
        }

    })

该指令可以像 <div class="icon"> 一样简单或 <div icon>您可以将模板应用于它。

ngInclude 的示例:

<ng-include src="'icon.html'"></ng-include>

在哪里icon.html只有您的模板信息。确保 id在这两种情况下都在范围内。