AngularJS之directive指令渲染的顺序

程序员文章站 2022-06-12 10:54:28

...

https://*.com/questions/38812824

I read document from AngualrJS : https://docs.angularjs.org/guide/component
And when I am reading to "Example of a component tree" section, I got confused about how a component tree's loading works, because there is nowhere to find the loading order.

How angular find the root directive and nested directive (may be in a template)? and Which component should start work first? I mean, If a nested component() is called earlier than its directive's appearance, will it be called later when its directive appears? How angular knows the appropriate component to call when a directive/template load? Or just iterate all components method? Or load all components first, then according index.html to form a component hierarchy, then call it properly?

Is there anybody kindly explain? thanks a lot!

Thanks estus!, your anwser is really helpful! According to
AngularJS : How does the HTML compiler arrange the order for compiling?
https://*.com/a/15044832/2893073
and Pete Bacon Darwin's example :

And this comes from :

How directives are compiled
https://docs.angularjs.org/guide/compiler#how-directives-are-compiled

AngularJS之directive指令渲染的顺序

博客分类： AngularJS AngularJSdirectivecompileorder

AngularJS之directive指令渲染的顺序

博客分类： AngularJS AngularJSdirectivecompileorder

exmaple:

// app.js

angular.module('compilation', [])

.directive('logCompile', function($rootScope) {
  $rootScope.log = "";

  return {
    controller: function($scope, $attrs) {
      $rootScope.log = $rootScope.log + ($attrs.logCompile + ' (controller)\n');
    },
    compile: function compile(element, attributes) {
      $rootScope.log = $rootScope.log + (attributes.logCompile + ' (compile)\n');
      return {
        pre: function preLink(scope, element, attributes) {
          $rootScope.log = $rootScope.log + (attributes.logCompile + ' (pre-link)\n');
        },
        post: function postLink(scope, element, attributes) {
          element.prepend(attributes.logCompile);
          $rootScope.log = $rootScope.log + (attributes.logCompile + ' (post-link)\n');
        }
      };
    }
  };
})

.directive('terminate', function() {
  return {
    terminal: true
  };
});

index.html


<!doctype html>
<html ng-app="compilation">
<head>
  <meta charset="utf-8">
  <title>Compilation Demo</title>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
<div log-compile="parent">
  <div log-compile="..child 1">
    <div log-compile="....child 1 a"></div>
    <div log-compile="....child 1 b"></div>
  </div>
  <div log-compile="..child 2">
    <div log-compile="....child 2 a"></div>
    <div log-compile="....child 2 b"></div>
  </div>
</div>

<!-- LOG -->
<pre>{{log}}</pre>
</body>
</html>

style.css

div {
  padding: 5px;
  margin: 5px;
  background-color: #EEE;
  border: 1px solid #BBB;
}

div > div {
  background-color: #DDD;
}

div > div > div {
  background-color: #CCC;
}

ol {
  list-style: decimal;
  margin-left: 30px;
}