37

angularjs 指令的compile功能有两个功能：preLink和postLink.

预链接功能

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

后链接功能

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

It tells what we should not do in preLink, I wonder what and when should I use preLink? For most of time I just used postLink. Is there any case that we must use it?

4

3 回答 3

13

您几乎不需要使用preLink. 可行的情况是当您需要在执行函数（以及其他指令）之前操作范围内的数据，而不是 DOM时。 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

于 2013-04-29T11:40:13.757 回答
7

当preLink指令想要将某些东西放入共享范围时使用函数，以便其他指令在其postLink函数中使用它。

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

于 2014-01-11T15:49:34.710 回答
6

在创建包含其他指令的自定义指令时，我不得不使用 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 以使该指令正常工作。

于 2013-09-20T13:12:44.470 回答