Mustular.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中完成这项工作。第二个嵌入式模板不会被编译，而是被引号括起来＆＃34; ...＆＃34;

如何在Angular中完成这项工作？

Answer 1

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

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在范围内。