Question

我已经完成了关于自定义指令的角度指南。我在custom指令中遇到了链接函数。我无法理解这个概念＆amp;使用链接功能。任何人都可以分享一个小功能，并提供有关链接功能和解释的说明。它的参数。

Answer 1

指令在以下步骤中编译

$ compile遍历DOM并查找指令。对于它找到的每个指令，它将它添加到指令列表中。
遍历整个DOM后，它将按优先级对指令列表进行排序。然后，执行每个指令自己的编译函数，为每个指令提供修改DOM本身的机会。每个编译函数返回一个链接函数，然后将其组合成一个组合链接函数并返回。
$ compile通过调用上一步中的组合链接函数将模板与作用域链接起来。这反过来将调用各个指令的链接功能，注册监听器

编译 - 这会将HTML字符串或DOM编译成模板并生成模板函数，然后可以将其用于将范围和模板链接在一起。在AngularJS创建它的实例之前和创建范围之前，使用compile函数更改原始DOM（模板元素）。 后链接 - 这是在链接子元素后执行的。在链接后功能中进行DOM转换是安全的。使用post-link函数执行逻辑，知道已经编译了所有子元素，并且已经执行了子元素的所有pre-link和post-link函数。 预链接 - 这是在子元素链接之前执行的。由于编译器链接功能无法找到正确的链接元素，因此进行DOM转换是不安全的。使用预链接函数来实现当AngularJS已经编译子元素时，但在调用任何子元素的后链接函数之前运行的逻辑。编译与链接

var app = angular.module（＆＃39; app＆＃39;，[]）; function createDirective（name）{return function（）{return {restrict：＆＃39; E＆＃39;，compile：function（tElem，tAttrs）{console.log（name +＆＃39 ;: compile＆＃39;）; return {pre：function（scope，iElem，attrs）{console.log（name +＆＃39 ;: pre link＆＃39;）; }， 32

post：function（scope，iElem，attrs）{console.log（name +＆＃39 ;: post link＆＃39;）; app.directive（＆＃39; levelOne＆＃39;，createDirective（＆＃39; level-One＆＃39;））; app.directive（＆＃39; levelTwo＆＃39;，createDirective（＆＃39; level-Two＆＃39;））; app.directive（＆＃39; levelThree＆＃39;，createDirective（＆＃39; level-Three＆＃39;））;您好{{name}}

Answer 2

链接功能参数

link: function(scope, element, attr) {
}

scope是一个Angular范围对象。
元素是此指令匹配的jqLite包装元素。
attrs是一个具有规范化属性名称及其对应值的对象

如何在angular js custom指令中使用链接函数

2 个答案: