Angular Parent/Child 指令的执行顺序

Question

根据 angulars 文档，Post link 函数 "Parent" 将仅执行一次 post link 子指令的函数已执行.

但是，对于以下代码，为什么我需要触发 "emit" 事件来通知 ng-repeat 已完成。理想情况下，它应该运行 automatically 而无需发出事件。

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('color','blue');
    if (scope.$last){
      window.alert("im the last!");
    }
  };
})
.directive('myMainDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('border','5px solid red');
  };
});

我无法理解指令执行顺序的概念。在我脑海中对上述指令的疑问总是让我感到困惑。请帮助我理解这一点。提前致谢！！！

Answer 1

情况不同，您可以运行在 plnkr. Here is the api reference

中进行简单测试

在一个指令中你有一个 compile 函数。您可以从它 return 一个函数，该函数是一个对象并具有两个属性 pre、post。然后 link 属性也是如此，但是 compile 函数如果存在则执行，而 link 被忽略并且 link 应该只是一个包含 pre 和 post.

的对象

The compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often

Link

This property is used only if the compile property is not defined.

.directive('myDir', myDir);

function myDir() {
    var directive = {
         compile: compile,
         link: {
            pre: preLink,
            post: postLink
         }
    };

    return directive;

    function compile() {
        return {
           pre: preCompile,
           post: postCompile
        }
    }

    function preCompile(scope, elem) {
        console.log("Pre Compile");
    }

    function postCompile(scope, elem) {
        console.log("Post Compile");
    }

    function preLink(scope, elem) {
        console.log("Pre Link");
    }

    function postLink(scope, elem) {
        console.log("Post Link");
    }
}

因此，如果您运行使用另一个具有相同指令的指令，并且您修改了控制台日志以便您知道发布了什么，您很快就会看到它的作用！

您注意到，首先所有 pre 编译都完成进入树，然后在返回的路上执行所有 post 编译。

Link

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.

Note that child elements that contain templateUrl directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs.

It is safe to do DOM transformation in the post-linking function on elements that are not waiting for their async templates to be resolved.

您不必定义 pre 或 post。事实上，您可以通过以下方式定义一个 post 函数：

compile: function (scope, elem) {},
link: function (scope, elem) {}

所以基本上，没有明确定义 pre 或 post 假设它们是 post。

在 ng-repeat 方面，它在指令范围内添加了一个视图属性，您可以使用它来确定事物。如果您阅读 this，您会发现 ng-repeat 可以做很多事情。

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

这是最适合你的场景的。

以下是您可以访问的作用域的一些属性：

$even: true
$first: true
$id: 3
$index: 0
$last: false
$middle: false
$odd: false

plnkr

ng-repeat 可能会以不同的方式执行 pre 和 post，因为来自文档的声明：

This directive executes at priority level 1000.

这里 plnkr 显示了如果更改优先级会发生什么。

如果您更改优先级，似乎会根据 pre 和 post 编译以及可能 linking 修改执行顺序。我不确定还有什么受此影响。

希望对您有所帮助，如有需要，请发表评论以获取更多帮助！

Angular Parent/Child 指令的执行顺序

Angular Parent/Child Directive's order of execution

angularjs

angularjs-directive

Link