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 =＆＃34;＆＃39; myPartialTemplate.html＆＃39;＆＃34;

试试这个。

 <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

使用ng Include附加html后编译指令

1 个答案: