angularjs - 为什么后链接函数在嵌入的子链接函数之前执行？

Question

AngularJS 中(前/后)链接函数的计时在 the documentation 中得到了很好的定义。

Pre-linking function

Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.

Post-linking function

Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function.

和this blog post清楚地说明了这一预期顺序。

但是当使用 ng-transclude 和嵌套指令时，这个顺序似乎并不适用。

这是 dropright 元素的示例 ( See the Plunkr )

<!-- index.html -->
<dropright>
  <col1-item name="a">
    <col2-item>1</col2-item>
    <col2-item>2</col2-item>
  </col1-item>
  <col1-item name="b">
    ...
  </col1-item>
</dropright>

// dropright-template.html
<div id="col1-el" ng-transclude></div>
<div id="col2-el">
  <!-- Only angularJS will put elements in there -->
</div>

// col1-item-template.html
<p ng-transclude></p>

// col2-item-template.html
<div ng-transclude></div>

右下角看起来像

当调用链接和 Controller 函数时，指令会在控制台中写入日志。通常显示:

但有时(几次刷新后)，顺序并不符合预期:

dropright post-link 函数在其子级的 post-link 函数之前执行。

这可能是因为，在我的特定情况下，我在子指令中调用 dropright Controller ( See the Plunkr )

angular.module('someApp', [])

.directive('dropright', function() {
    return {
        restrict: 'E',
        transclude: 'true',
        controller: function($scope, $element, $attrs) {
            console.info('controller - dropright');

            $scope.col1Tab = [];
            $scope.col2Tab = [];

            this.addCol1Item = function(el) {
                console.log('(col1Tab pushed)');
                $scope.col1Tab.push(el);
            };

            this.addCol2Item = function(el) {
                console.log('(col2Tab pushed)');
                $scope.col2Tab.push(el);
            };
        },
        link: {
            post: function(scope, element, attrs) {
                console.info('post-link - dropright');
                // Here, I want to move some of the elements of #col1-el
                // into #col2-el
            }
        },
        templateUrl: 'dropright-tpl.html'
    };
})

.directive('col1Item', function($interpolate) {
    return {
        require: '^dropright',
        restrict: 'E',
        transclude: true,
        controller: function() {
            console.log('-- controller - col1Item');
        },
        link: {
            post: function(scope, element, attrs, droprightCtrl) {
                console.log('-- post-link - col1Item');
                droprightCtrl.addCol1Item(element.children()[0]);
            }
        },
        templateUrl: 'col1-tpl.html'
    };      
})

.directive('col2Item', function() {
    var directiveDefinitionObject = {
        require: '^dropright',
        restrict: 'E',
        transclude: true,
        controller: function() {
            console.log('---- controller - col2Item');
        },
        link: {
            post: function(scope, element, attrs, droprightCtrl) {
                console.log('---- post-link - col2Item');
                droprightCtrl.addCol2Item(element.children()[0]);
            }
        },
        templateUrl: 'col2-tpl.html'
    };
    return directiveDefinitionObject;
});

在使用嵌入时，是否有任何干净的方法可以在其子级的所有链接函数之后执行指令的链接函数？

Answer 1

这是我的理论 - 导致序列问题的不是嵌入方面，而是模板是 templateUrl。在 post 链接函数对其进行操作之前需要解析模板 - 因此我们说 post 链接函数可以安全地进行 DOM 操作。虽然我们对所有 3 个模板都收到了 304，但我们确实必须阅读它们，它最终解决了模板 promise 。

我用 template 而不是 templateUrl 创建了一个 plunker 来证明推论。我有很多次热刷新/plunker停止/运行，但最后总是得到link - dropright。

Plunker with template instead of templateUrl

我并不假装完全理解compile.js代码。然而，确实似乎在 compileTemplateUrl 函数 $http.success() 解析模板，然后在成功时调用 applyDirectivesToNode 函数并传入 postLinkFn >.

https://github.com/angular/angular.js/blob/master/src/ng/compile.js