Angular.js的Mustache.js，Angular的三重护腕？

我有Mustache.js中的以下内容：

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

icon.tmpl是一个模板，具有以下内容：

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

在Mustache.js中，感谢三重护腕，这完美地工作，两个级别的模板被编译。 现在我无法在Angular.js中完成这项工作。 第二个embedded模板不会被编译，而是被引号“…”包围，

如何使这个工作在Angular？

Answer 1

你可以使用ngInclude或创build一个指令。 下面是一个图标指令的例子，它基本上只是用你指定的div信息replace任何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都在范围内。