我们什么时候应该使用指令编译函数的`preLink`？答案

【问题标题】：When shall we use `preLink` of directive's compile function?我们什么时候应该使用指令编译函数的`preLink`？
【发布时间】：2013-02-24 05:19:33
【问题描述】：

angularjs指令的compile函数有两个函数：preLink和postLink。

预链接功能

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

后链接功能

在子元素链接后执行。在post-linking函数中做DOM转换是安全的。

它告诉我们在preLink 中不应该做什么，我想知道什么时候应该使用preLink？大多数时候我只使用postLink。有什么情况我们必须使用它吗？

【问题讨论】：

是的，好像preLink是控制器的冗余（除了preLink不能共享）。
似乎在angularjs核心中，pre只用在ngInit（在进入后链接阶段之前评估表达式）和form指令中。
我在这里找到了一个很好的用例：How to render a partial with variables，虽然我很确定我可以将它用作 postLink 函数。
这可能对你有帮助undefinednull.com/2014/07/07/…

标签： angularjs angularjs-directive

【解决方案1】：

您几乎不需要使用preLink。可行的情况是当您需要在范围内操作数据时，而不是 DOM，before link 函数（也包括其他指令）被执行。

正如 jacob 所说，您也可以随时从控制器中执行此操作，但有时将代码放在指令本身中更合适。

有一篇关于指令如何工作的优秀文章，链接顺序很好地解释了：http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

如果您需要一个很好的例子来说明为什么有时需要预链接，我建议您查看角度指令本身的代码。例如https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js

【讨论】：

【解决方案2】：

preLink 函数用于当指令要将某些内容放入 shared 范围内，以便其他指令在其postLink 函数中使用它。

Angular 的表单指令，例如，创建一个包含所有输入条目的对象。自定义指令可以在 postLink 函数中安全地访问此对象。

【讨论】：

【解决方案3】：

在创建包含其他指令的自定义指令时，我不得不使用 preLink。在我的例子中，我的指令包含一个模板，该模板将 Angular UI Bootstrap 的 Typeahead 指令应用于它的一些元素，并使用它自己的范围变量来初始化 Typeahead 功能。

例如：

...
template:
    "<select ng-show='dropdown' class='form-control' ng-model='ngModel' ng-options='s for s in suggestions'></select>"
    + "<textarea ng-show='!dropdown' class='form-control' ng-model='ngModel' typeahead='s for s in suggestions |filter:$viewValue' typeahead-min-length='0' typeahead-editable='{{editable}}'></textarea>",
...

在这种情况下，Angular 将子指令链接在父指令之前，因此我需要使用 preLink 来设置预输入。当我在指令 postLink 函数中初始化 $scope.dropdown 和 $scope.editable 变量时，我发现当 typeahead 指令被链接时它们没有被初始化，我不得不将它们的初始化移动到 preLink 以使该指令正常工作。

【讨论】：

您能否提供一些示例演示代码来展示您在preLink 中所做的工作？