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

【问题标题】：How to insert HTML element inside another HTML element in directive template?如何在指令模板中的另一个 HTML 元素中插入 HTML 元素？
【发布时间】：2014-07-22 09:08:39
【问题描述】：

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

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

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

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

这不会将 newElement 添加为 ul 的子元素...

【问题讨论】：

标签： html angularjs dom angularjs-directive

【解决方案1】：

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

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

【讨论】：

【解决方案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);

【讨论】：