Angularjs 为什么在预链接函数中进行DOM转换不安全

在$compile中有一个预链接函数，在AngularJS API文档中，他们写道在预链接函数中进行DOM转换是不安全的。有人知道为什么吗

首先，什么是链接？ 链接是angular用于将模型绑定到DOM的过程

link函数负责注册DOM侦听器以及更新DOM。它在克隆模板后执行。这就是大多数指令逻辑的位置~AngularJS API文档

下面是一个非常好的图表，展示了角度是如何工作的 那么为什么不能在预链接中操作DOM呢？ 因为预链接发生在链接再次发生之前，这是angular编译并将模型绑定到DOM的部分，因此它可以对其进行操作。所以，在预链接过程中，angular完全不知道DOM及其元素，因此根本无法对其进行操作

参考图表： 预链接将在框之间绘制所有箭头/线之前进行 链接将是绘制箭头/线条的阶段 后链接将在绘制所有箭头/线并连接各部分后进行 首先，什么是链接？ 链接是angular用于将模型绑定到DOM的过程

link函数负责注册DOM侦听器以及更新DOM。它在克隆模板后执行。这就是大多数指令逻辑的位置~AngularJS API文档

下面是一个非常好的图表，展示了角度是如何工作的 那么为什么不能在预链接中操作DOM呢？ 因为预链接发生在链接再次发生之前，这是angular编译并将模型绑定到DOM的部分，因此它可以对其进行操作。所以，在预链接过程中，angular完全不知道DOM及其元素，因此根本无法对其进行操作

参考图表： 预链接将在框之间绘制所有箭头/线之前进行 链接将是绘制箭头/线条的阶段 后链接将在绘制所有箭头/线并连接各部分后进行

---

预链接函数和后链接函数之间的主要实际区别在于，预链接函数是从父指令到子指令执行的，而后链接函数是以相反的顺序执行的

这是$compile服务行为的结果，解释如下：

预链接功能

在链接子元素之前执行。这样做不安全 转换，因为编译器链接函数将无法定位 链接的正确元素

后链接功能

链接子元素后执行

一般来说，这种行为会影响任何情况，即预链接函数期望从它的一个子函数得到某样东西，但不会得到它，因为在父函数的预链接之后运行的子函数中的预/后链接函数没有考虑到这一点，并以某种方式弄乱了彼此的控制器或DOM。但该手册暗示了非常具体的情况

在

这将导致

嗨，来自这个世界

嗨，来自那个世界

错误：链接节点未定义 nodeLinkFn@

显然，一个指令在这里是活死人，它的前链接仍然是活的$compile还希望链接其子级，但未能找到父级

这不会发生：

是的，你好，来自那个世界

嗨，来自那个世界

嗨，来自这个世界

---

因此，a和b可以在达到它们的目的后和平地死去。

前链接函数和后链接函数之间的主要实际区别在于，前链接函数从父指令执行到子指令，后链接函数以相反的顺序执行

这是$compile服务行为的结果，解释如下：

预链接功能

在链接子元素之前执行。这样做不安全 转换，因为编译器链接函数将无法定位 链接的正确元素

后链接功能

链接子元素后执行

一般来说，这种行为会影响任何情况，即预链接函数期望从它的一个子函数得到某样东西，但不会得到它，因为在父函数的预链接之后运行的子函数中的预/后链接函数没有考虑到这一点，并以某种方式弄乱了彼此的控制器或DOM。但该手册暗示了非常具体的情况

在

这将导致

嗨，来自这个世界

嗨，来自那个世界

错误：链接节点未定义 nodeLinkFn@

显然，一个指令在这里是活死人，它的前链接仍然是活的$compile还希望链接其子级，但未能完成 和父母在一起

这不会发生：

是的，你好，来自那个世界

嗨，来自那个世界

嗨，来自这个世界

---

因此a和b可以在达到目的后和平地死去。

在子元素链接之前执行。进行DOM转换不安全，因为编译器链接函数将无法找到正确的链接元素。-这意味着元素尚未出现…在链接子元素之前执行。进行DOM转换不安全，因为编译器链接函数将无法找到正确的链接元素。-这意味着元素还没有出现…谢谢你的回答。我知道，但这并不能解释为什么我不应该操纵指令的模板DOM。@Christoph关于你的问题，你不能在预链接期间操纵模板；您可以在链接期间或链接后感谢您的回答。我知道，但这并不能解释为什么我不应该操纵指令的模板DOM。@Christoph关于你的问题，你不能在预链接期间操纵模板；您可以在链接期间或发布链接

app.directive('abba', function () {
  return {
    template: '<a><b></b></a>',
    link: {
      pre: function (scope, element, attrs, ctrl) {
        console.log('hi from this world')
        element.find('a').remove()
      }
    }
  }
});

app.directive('a', function () {
  return {
    link: {
      pre: function (scope, element, attrs, ctrl) {
        console.log('hi from that world')
      }
    }    
  };
});

app.directive('b', function () {
  return {
    link: {
      pre: function (scope, element, attrs, ctrl) {
       console.log('no hi from that world') 
      }
    }   
  };
});