angularjs - Angular 父/子指令的执行顺序

Question

根据 Angels 文档，只有在执行了子指令的后链接函数后，才会执行“父级”的后链接函数。

但是，如果是以下代码，为什么我需要触发“emit”事件来通知 ng-repeat 已完成。理想情况下，它应该自动运行，而不需要发出事件。

<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 中运行一个简单的测试。 。这是api reference

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

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编译。

链接

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而言，它将 View 属性添加到指令范围内，您可以使用它来确定事物。如果你给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显示如果更改优先级会发生什么。

如果您更改优先级，则会修改预和后编译以及可能链接的执行顺序。我不确定这还会影响什么。

希望这对您有所帮助，如果需要更多帮助，请评论!