如何防止angularjs指令编译（作为模板使用）答案

【问题标题】：How to prevent angularjs directive compilation (use as a template)如何防止angularjs指令编译（作为模板使用）
【发布时间】：2013-09-10 09:45:21
【问题描述】：

我只是想知道是否可以阻止angularjs指令的编译？

我使用 jQuery Slick Grid 插件在我的网站中显示一些数据网格，并且我想出了一种方法来使用包含 HTML 的嵌套指令轻松定义单元格模板。

问题是这个 HTML 代码是用来作为模板的，但是 AngularJS 在网格初始化之前编译它！（虽然看起来合乎逻辑......）

提前致谢！

编辑：这是我的指令的一个示例。

<div class="datagrid" my-datagrid="o in collection">
    <div my-datagrid-column="col1">
         <div>{{o.col1}}</div>
    </div>
    <div my-datagrid-column="col2">
         <div custom-directive-with-transclusion="foobar">{{o.col2}}</div>
    </div>
</div>

就是这样，我有一个父指令my-datagrid，其中包含几个描述网格每一列的my-datagrid-column。这些 my-datagrid-column 指令节点中的 Eech 包含 HTML 内容，其目的是用作网格单元格的模板，在它们将被渲染时。

问题在于，引擎“看到”并编译、嵌入custom-directive-with-transclusion 指令在my-datagrid 指令创建Datagrid 之前。

所以我的datagrid-column 指令获得了一个已经编译的单元格“模板”...我不希望这样，我想使用$compile 服务自己编译每个单元格。

也许这不是这样做的方法，也许我完全走错了路。我只是想避免在 Javascript 控制器中描述一些丑陋的引号之间的单元格模板并转义所有内容，例如：

template[0] = '<div>this is my ugly template {{myCol1}} of my first column</div>';
template[1] = '<div>this is my ugly template {{myCol2}} of the 2nd column</div>';

【问题讨论】：

我不明白这个问题。正常的方法是创建一个指令来包装你的 jquery 插件。
能否提供示例代码或plnkr？

标签： angularjs slickgrid

【解决方案1】：

两个选项：

不要使用 {{}}，而是使用另一个符号来表示这些。然后 Angularjs 将忽略它们。在您的指令中，搜索符号并将其替换为 {{}}。
看看One-off rendering of an angular template string 我使用这种技术在单元格中放置角度指令并且效果很好。

祝你好运。

【讨论】：

【解决方案2】：

链接完成后你不能停止编译过程但是你可以从DOM中取出元素（取消链接元素，它会阻止编译过程），就像ng-if指令一样，在这里你可以看到ng-if 代码： https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js

【讨论】：