使用 ngInclude 附加 html 后编译指令

Question

我有一个指令将 li 项目附加到列表中。每个 li 都有一个 div，其中包含模板。我在附加 html 后编译它，但 ngInclude 不起作用。它不包括指定的模板。

 scope.attrs.itemTpl = 'dimension-item-tpl.html';

 elemnt.find('ul').append(generatedList);
 $compile(generatedList)(scope);

试了两个例子，html后追加：

 <li class="col-xlg-2 col-lg-3 col-md-4 col-sm-6" data-item="creative_filename">
    <div ng-include="dimension-item-tpl.html"></div>
 </li>
 <li class="col-xlg-2 col-lg-3 col-md-4 col-sm-6" data-item="size">
    <div ng-include="dimension-item-tpl.html"></div>
 </li>

第二个：

<li class="col-xlg-2 col-lg-3 col-md-4 col-sm-6" data-item="creative_filename">
    <div ng-include="attrs.itemTpl"></div>
</li>
<li class="col-xlg-2 col-lg-3 col-md-4 col-sm-6" data-item="size">
   <div ng-include="attrs.itemTpl"></div>
</li>

我做错了什么？

示例： http://jsfiddle.net/mato75/4zhLtjbw/

Answer 1

在第一个例子中

您缺少单引号。

ngInclude = 评估为 URL 的角度表达式。如果源是 字符串常量，请确保将其用单引号括起来，例如 src="'myPartialTemplate.html'"。

试试这个。

 <li class="col-xlg-2 col-lg-3 col-md-4 col-sm-6" data-item="creative_filename">
    <div ng-include="'dimension-item-tpl.html'"></div>
 </li>
 <li class="col-xlg-2 col-lg-3 col-md-4 col-sm-6" data-item="size">
    <div ng-include="'dimension-item-tpl.html'"></div>
 </li>

注意单引号。

参考：https://docs.angularjs.org/api/ng/directive/ngInclude