angularjs - 为什么在预链接功能中进行 DOM 转换不安全

Question

在API 文档$compile中Pre-linking-function，AngularJS他们写道，在Pre-linking-function. 有谁知道为什么？

参考 API 文档部分

Answer 1

首先，什么是链接？

linking是 Angular 用来将模型绑定到 DOM 的过程。

链接函数负责注册 DOM 监听器以及更新 DOM。它在模板被克隆后执行。这是放置大部分指令逻辑的地方。~AngularJS API 文档

下面是一个非常棒的图表，展示了 Angular 的工作原理

那么为什么你不能操纵DOMinpre-linking呢？

因为pre-linking发生在链接发生之​​前（这也是 angular 编译并将模型绑定到的部分，DOM以便它可以操作它）。因此，在pre-linkingangular 期间根本不知道DOM及其元素能够操纵它。

参考图表：

• pre-linking将在所有的箭头/线在框之间绘制之前
• linking将是绘制箭头/线期间的阶段
• post-linking将在绘制所有箭头/线并且连接碎片之后

Answer 2

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

这是手册$compile中解释的服务行为的结果：

预链接功能

在链接子元素之前执行。进行 DOM 转换是不安全的，因为编译器链接函数将无法找到正确的链接元素。

后链接功能

在子元素链接后执行。

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

在这个笨拙的

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') 
      }
    }   
  };
});

这将导致

来自这个世界的你好

来自那个世界的你好

错误：linkNode 未定义 nodeLinkFn@ https://code.angularjs.org/1.4.8/angular.js:8330:9

显然，adirective 在这里是一个活死人，它的 pre-link 还活着。$compile还希望链接其子级，但未能找到父级。

如果使用后链接，则不会发生这种情况：

是的，来自那个世界

来自那个世界的你好

来自这个世界的你好

因此a，b在他们达到目的后可以安详地死去。