如何在指令模板中的另一个HTML元素中插入HTML元素？

Question

我有一个简单模板的指令：

restrict: 'E',
link: function(scope, element, attrs) {},
template: '<ul></ul>

如何在链接函数中使用代码动态添加模板li元素？ 我的列表是HTML元素：

var newElement = $compile("<li><div>my text</div></li>")(scope);
element.append(newElement);

这不会将newElement添加为ul ...

的子元素

Answer 1

在您的情况下，

element不是ul，而是您的指令包装元素。您需要先找到列表元素：

var newElement = $compile("<li><div>my text</div></li>")(scope);
element.find('ul').append(newElement);

Answer 2

另一种选择是用指令模板

替换指令包装元素

restrict: 'E',
replace: true,
link: function(scope, element, attrs) {},
template: '<ul></ul>

然后您可以使用原始代码附加新元素

var newElement = $compile("<li><div>my text</div></li>")(scope);
element.append(newElement);