在angularjs中，在制作指令时，有没有办法使用链接函数来操作模板的DOM？答案

【问题标题】：In angularjs, when making a directive, is there a way to manipulate the DOM of the template using the link function?在angularjs中，在制作指令时，有没有办法使用链接函数来操作模板的DOM？
【发布时间】：2016-11-28 04:21:33
【问题描述】：

假设我正在 angularjs 中创建一个动态指令。我想使用链接函数根据参数来操作模板 html 的 DOM。

所以在原版 javascript 中，我会执行以下操作：

var template = ... //something here that sets the variable to the template
var newdiv = document.createElement("div");
template.appendChild(newdiv);

我找到了一些答案，他们将模板视为字符串，并在文字字符串 "<div></div>" 中拼接。

但是，我计划进行大量修改，因此将其视为字符串很快就会变得太混乱，并且如果我这样做将无法维护。如果可能的话，我想像对待普通 js 中的页面 DOM 一样对待它。

我也愿意没有模板，只是在链接函数中动态生成整个东西，如果我有可能以某种方式让指令返回这个

【问题讨论】：

link 就是为了这个。模板会自动创建数据绑定，手动添加的元素没有这个功能。您很有可能遇到 XY 问题，并且应该将模板重构为多个指令以停止“混乱”。
没有数据绑定也没关系，该指令一旦制定就不会改变。我如何根据参数使指令动态化，而不是每次都返回相同的 html
有很多可能性，例如component template function 可以注入 $attrs 以对模板字符串做出决定。优选的方式取决于具体情况。 ng-if 或 ng-include 也可以。我建议更新问题，详细说明指令应该做什么，这可能有助于获得高质量的答案。
现在，我要做的就是弄清楚如何在模板的根 div 中添加一个附加 div。而已。一旦我弄清楚这一点，我就可以做剩下的了
要在编译前添加到模板，可以修改compile函数中的element。要添加到编译模板，它是link中的element。

标签： javascript html angularjs dom

【解决方案1】：

编译后的元素可以在link function中修改。如果不重新编译，此时不能向元素添加任何绑定或指令。

...
link: function (scope, element, attrs) {
  // jqLite element that partly implements jQuery API
  element.append(...);

  // native element that is wrapped with jqLite
  var nativeElement = element[0];
  nativeElement.appendChild(...);
}

【讨论】：

好的，但我的问题与如何将 nativeElement 添加到元素有关。 element.append(nativeElement) 不起作用
应该的。 append 接受多种类型，包括 DOM 元素，这里遵循 jQuery APi。如果nativeElement 和element 是同一个元素，那显然是行不通的。如果您对此有疑问，请提供一个可重现的示例（一个 plunker 左右）。