编译函数

当Angular启动时，每个指令的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个项目，后一种选择可能比前一种更快。

Do:

操作标记，使其充当实例(克隆)的模板。

不

附加事件处理程序。 检查子元素。 建立对属性的观察。 在瞄准镜上设置监视。

Pre-link函数

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

正如前面在编译顺序一节中看到的，预链接函数称为父-子函数，而后链接函数称为子-父函数。

预链接功能很少使用，但在特殊情况下可能有用;例如，当一个子控制器向父控制器注册自己时，但是注册必须以父-然后子的方式进行(ngModelController就是这样做的)。

不:

检查子元素(它们可能还没有呈现，绑定到范围等)。

控制器的功能

每当一个新的相关元素被实例化时，就会调用每个指令的控制器函数。

正式来说，控制器函数是这样的:

定义可以在控制器之间共享的控制器逻辑(方法)。 启动作用域变量。

同样，重要的是要记住，如果指令涉及一个孤立的作用域，那么其中继承自父作用域的任何属性都还不可用。

Do:

定义控制器逻辑 初始化范围变量

不:

检查子元素(它们可能还没有呈现，绑定到范围等)。

Post-link函数

当post-link函数被调用时，之前的所有步骤都已经发生了——绑定、传输等。

这通常是进一步操作呈现的DOM的地方。

Do:

操作DOM(呈现，并因此实例化)元素。 附加事件处理程序。 检查子元素。 建立对属性的观察。 在瞄准镜上设置监视。

如何声明各种函数?

编译，控制器，预链接和后链接

如果要使用这四个函数，指令将遵循以下形式:

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术语中，我们说compile函数返回一个模板函数。

编译，控制器和Post-link

如果不需要预链接，compile函数可以简单地返回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) link方法定义之后添加一个compile方法。为此，我们可以使用:

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
        }

    };  
});

控制器& Post-link

如果不需要编译函数，可以完全跳过它的声明，并在指令配置对象的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                 
        },          
    };  
});

没有控制器

在上面的任何示例中，如果不需要，可以简单地删除控制器函数。例如，如果只需要post-link函数，可以使用:

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

源模板和实例模板之间的区别是什么?

事实上，Angular允许DOM操作，这意味着编译过程中的输入标记有时与输出标记不同。特别是，一些输入标记在呈现给DOM之前可能会被克隆几次(比如ng-repeat)。

Angular的术语有点不一致，但它仍然区分了两种类型的标记:

源模板——如果需要，要克隆的标记。如果克隆，该标记将不会呈现给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中，并被绑定到相关的作用域。