执行指令功能的顺序是什么？

Question

编写Angular指令时，可以使用以下任何函数来操作声明指令的元素的DOM行为，内容和外观：

编译
控制器
前链路
链路交

对于应该使用哪种功能似乎存在一些混淆。这个问题包括：

指令基础

功能性，做和不做

执行指令功能的顺序是什么？

对于单个指令

根据以下plunk，请考虑以下HTML标记：

<body>
    <div log='some-div'></div>
</body>

使用以下指令声明：

myApp.directive('log', function() {

    return {
        controller: function( $scope, $element, $attrs, $transclude ) {
            console.log( $attrs.log + ' (controller)' );
        },
        compile: function compile( tElement, tAttributes ) {
            console.log( tAttributes.log + ' (compile)'  );
            return {
                pre: function preLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (pre-link)'  );
                },
                post: function postLink( scope, element, attributes ) {
                    console.log( attributes.log + ' (post-link)'  );
                }
            };
         }
     };  

});

控制台输出将是：

some-div (compile)
some-div (controller)
some-div (pre-link)
some-div (post-link)

我们可以看到首先执行compile，然后执行controller，然后执行pre-link，最后执行post-link。

对于嵌套指令

注意：以下内容不适用于在其链接功能中呈现其子项的指令。相当多的Angular指令都这样做（比如ngIf，ngRepeat或任何带有transclude的指令）。在调用其子指令link之前，这些指令本身将具有名为的compile函数。

原始HTML标记通常由嵌套元素组成，每个元素都有自己的指令。如下面的标记（参见plunk）：

<body> <div log='parent'> <div log='..first-child'></div> <div log='..second-child'></div> </div> </body>

控制台输出如下所示：

// The compile phase parent (compile) ..first-child (compile) ..second-child (compile) // The link phase parent (controller) parent (pre-link) ..first-child (controller) ..first-child (pre-link) ..first-child (post-link) ..second-child (controller) ..second-child (pre-link) ..second-child (post-link) parent (post-link)

我们可以在这里区分两个阶段 - 编译阶段和链接阶段。

编译阶段

当加载DOM时，Angular开始编译阶段，从上到下遍历标记，并在所有指令上调用compile。从图形上看，我们可以这样表达：

值得注意的是，在这个阶段，编译函数获取的模板是源模板（而不是实例模板）。

链接阶段

DOM实例通常只是将源模板呈现给DOM的结果，但它们可以由ng-repeat创建，也可以动态引入。

每当具有指令的元素的新实例呈现给DOM时，链接阶段就会开始。

在此阶段，Angular调用controller，pre-link，迭代子项，并在所有指令上调用post-link，如下所示：

Answer 2

这些函数调用之间还会发生什么？

各种指令函数从名为$compile的两个其他角度函数（执行指令＆＃39; s compile）和名为nodeLinkFn的内部函数中执行（其中指令＆＃39; controller，preLink和postLink已执行）。在调用指令函数之前和之后，角函数内发生了各种各样的事情。也许最值得注意的是儿童递归。以下简化图显示了编译和链接阶段的关键步骤：

An illustration showing Angular compile and link phases

要演示这些步骤，请使用以下HTML标记：

<div ng-repeat="i in [0,1,2]">
    <my-element>
        <div>Inner content</div>
    </my-element>
</div>

使用以下指令：

myApp.directive( 'myElement', function() {
    return {
        restrict:   'EA',
        transclude: true,
        template:   '<div>{{label}}<div ng-transclude></div></div>'
    }
});

编译

compile API如下所示：

compile: function compile( tElement, tAttributes ) { ... }

参数通常以t为前缀，表示提供的元素和属性是源模板的元素和属性，而不是实例的元素和属性。

在调用compile被删除的内容（如果有）之前，该模板将应用于标记。因此，提供给compile函数的元素将如下所示：

<my-element>
    <div>
        "{{label}}"
        <div ng-transclude></div>
    </div>
</my-element>

请注意，此时不会重新插入已转换的内容。

在调用指令.compile之后，Angular将遍历所有子元素，包括那些可能刚被指令引入的元素（例如模板元素）。

实例创建

在我们的例子中，将创建上面三个源模板实例（ng-repeat）。因此，以下序列将执行三次，每个实例一次。

控制器

controller API涉及：

controller: function( $scope, $element, $attrs, $transclude ) { ... }

进入链接阶段，通过$compile返回的链接功能现在提供了范围。

首先，如果要求，链接功能会创建子范围（scope: true）或隔离范围（scope: {...}）。

然后执行控制器，提供实例元素的范围。

预链接

pre-link API如下所示：

function preLink( scope, element, attributes, controller ) { ... }

在指令.controller和.preLink函数的调用之间几乎没有任何反应。 Angular仍然建议如何使用每个。

在.preLink调用之后，链接函数将遍历每个子元素 - 调用正确的链接函数并附加当前作用域（作为子元素的父作用域）。

后链接

post-link API类似于pre-link函数：

function postLink( scope, element, attributes, controller ) { ... }

或许值得注意的是，一旦调用了指令的.postLink函数，其所有子元素的链接过程就已完成，包括所有子函数.postLink。< / p>

这意味着，在调用.postLink时，孩子们会活着“生活”。准备好了。这包括：

数据绑定
transclusion applied
附加范围

此阶段的模板将如此：

<my-element>
    <div class="ng-binding">
        "{{label}}"
        <div ng-transclude>                
            <div class="ng-scope">Inner content</div>
        </div>
    </div>
</my-element>

Answer 3

如何声明各种功能？

编译，控制器，预链接＆amp;交联

如果要使用全部四个函数，则该指令将遵循以下形式：

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.
            return {
                pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
                    // Pre-link code goes here
                },
                post: function postLink( scope, element, attributes, controller, transcludeFn ) {
                    // Post-link code goes here
                }
            };
        }
    };  
});

请注意，compile返回一个包含pre-link和post-link函数的对象;在Angular lingo中，我们说编译函数返回一个模板函数。

编译，控制器＆amp;交联

如果pre-link不是必需的，编译函数可以简单地返回post-link函数而不是定义对象，如下所示：

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.
            return function postLink( scope, element, attributes, controller, transcludeFn ) {
                    // Post-link code goes here                 
            };
        }
    };  
});

有时，人们希望在定义（post）compile方法后添加link方法。为此，可以使用：

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        compile: function compile( tElement, tAttributes, transcludeFn ) {
            // Compile code goes here.

            return this.link;
        },
        link: function( scope, element, attributes, controller, transcludeFn ) {
            // Post-link code goes here
        }

    };  
});

控制器＆amp;交联

如果不需要编译函数，可以完全跳过它的声明，并在指令的配置对象的link属性下提供post-link函数：

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        controller: function( $scope, $element, $attrs, $transclude ) {
            // Controller code goes here.
        },
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

无控制器

在上面的任何一个例子中，如果不需要，可以简单地删除controller函数。因此，例如，如果只需要post-link函数，可以使用：

myApp.directive( 'myDirective', function () {
    return {
        restrict: 'EA',
        link: function postLink( scope, element, attributes, controller, transcludeFn ) {
                // Post-link code goes here                 
        },          
    };  
});

Answer 4

源模板和实例模板之间有什么区别？

Angular允许DOM操作的事实意味着编译过程中的输入标记有时与输出不同。特别是，在渲染到DOM之前，可以将一些输入标记克隆几次（如ng-repeat）。

角度术语有点不一致，但它仍然区分两种类型的标记：

源模板 - 要克隆的标记（如果需要）。如果克隆，则此标记将不会呈现给DOM。
实例模板 - 要呈现给DOM的实际标记。如果涉及克隆，则每个实例都将是克隆。

以下标记证明了这一点：

<div ng-repeat="i in [0,1,2]">
    <my-directive>{{i}}</my-directive>
</div>

源html定义

    <my-directive>{{i}}</my-directive>

用作源模板。

但由于它包含在ng-repeat指令中，因此将克隆此源模板（在我们的示例中为3次）。这些克隆是实例模板，每个都将出现在DOM中并绑定到相关范围。

Answer 5

编译功能

当Angular bootstraps时，每个指令的compile函数只被调用一次。

正式地说，这是执行（源）模板操作的地方，不涉及范围或数据绑定。

首先，这是为了优化目的;考虑以下标记：

<tr ng-repeat="raw in raws">
    <my-raw></my-raw>
</tr>

<my-raw>指令将呈现一组特定的DOM标记。所以我们可以：

允许ng-repeat复制源模板（<my-raw>），然后修改每个实例模板的标记（在compile函数之外）。
修改源模板以包含所需的标记（在compile函数中），然后允许ng-repeat复制它。

如果raws集合中有1000个项目，后一个选项可能比前一个更快。

执行：

操纵标记，使其成为实例（克隆）的模板。

不要

附加事件处理程序。
检查子元素。
设置对属性的观察。
在示波器上设置手表。

Answer 6

链接后功能

调用post-link函数时，所有先前的步骤都已发生 - 绑定，转换等。

这通常是进一步操纵渲染DOM的地方。

执行：

操纵DOM（渲染，因此实例化）元素。
附加事件处理程序。
检查子元素。
设置对属性的观察。
在示波器上设置手表。

Answer 7

控制器功能

每当实例化新的相关元素时，都会调用每个指令的controller函数。

正式地说，controller功能是一个：

定义可在控制器之间共享的控制器逻辑（方法）。
启动范围变量。

同样，重要的是要记住，如果指令涉及隔离范围，那么从父范围继承的任何属性都不可用。

执行：

定义控制器逻辑
启动范围变量

不要：

检查子元素（它们可能尚未呈现，绑定到范围等）。

Answer 8

预链接功能

每当实例化新的相关元素时，都会调用每个指令的pre-link函数。

如前面编译顺序部分所示，pre-link函数称为parent-then-child，而post-link函数称为child-then-parent。

很少使用pre-link函数，但在特殊情况下可能很有用;例如，当子控制器向父控制器注册自己时，注册必须采用parent-then-child方式（ngModelController以这种方式执行）。

不要：

检查子元素（它们可能尚未呈现，绑定到范围等）。

Angular指令 - 何时以及如何使用编译，控制器，预链接和后链接

指令基础

功能性，做和不做

相关问题：

8 个答案:

执行指令功能的顺序是什么？

对于单个指令

对于嵌套指令

编译阶段

链接阶段

这些函数调用之间还会发生什么？

编译

实例创建

控制器

预链接

后链接

如何声明各种功能？

编译，控制器，预链接＆amp;交联

编译，控制器＆amp;交联

控制器＆amp;交联

无控制器

源模板和实例模板之间有什么区别？

编译功能

执行：

不要

链接后功能

执行：

控制器功能

执行：

不要：

预链接功能

不要：