javascript - 在AngularJS中，当制作指令时，有没有办法使用链接函数来操作模板的DOM？

Question

假设我正在 angularjs 中创建一个动态指令。我想使用 link 函数根据参数来操作模板 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 一样对待它。

我也愿意没有模板，只是在链接函数中动态生成整个内容，如果我有可能以某种方式获得返回此的指令

Answer 1

可以在 link function 中修改编译元素。此时，如果不重新编译，则无法将任何绑定(bind)或指令添加到元素中。

...
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(...);
}