Question

根据angulars文档，＆＃34; Parent＆＃34;的帖子链接功能只有在执行子指令的post link函数后才会执行。

但是，如果是以下代码，为什么我需要触发＆＃34;发出＆＃34;事件通知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函数存在并且忽略链接并且链接应该只是包含pre和{{1 }}

编译函数处理转换模板DOM。由于大多数指令不进行模板转换，因此不经常使用

链接

仅当未定义编译属性时才使用此属性。

post

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

您注意到的是，首先所有.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编译。

链接


预连接功能

在链接子元素之前执行。做DOM不安全   转换，因为编译器链接功能将无法定位   正确的链接元素。

后连接功能

链接子元素后执行。

请注意，包含templateUrl指令的子元素不会   已经编译和链接，因为他们正在等待他们的   模板加载异步和自己的编译和链接   已经暂停，直到发生。

在后连接功能上进行DOM转换是安全的   不等待异步模板的元素   解决。

您不必定义post或pre。实际上，您可以通过执行以下操作来定义post函数：

post

所以基本上，没有明确定义compile: function (scope, elem) {}, link: function (scope, elem) {}或pre，假设它们是post。

就post而言，它将视图属性添加到指令范围，您可以使用它来确定事物。如果您对this进行了阅读，您会注意到ng-repeat可以做很多事情。

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>

plnkr

由于文档中的此声明，$even: true $first: true $id: 3 $index: 0 $last: false $middle: false $odd: false可能会按预期执行ng-repeat和pre：


该指令在优先级1000执行。

以下是plnkr，显示更改优先级时会发生什么。

如果您更改优先级，则会显示，这将根据post和pre编译修改执行顺序，也可能是链接。我不确定还有什么会受到影响。

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

Angular Parent / Child Directive的执行顺序

1 个答案:

链接