AngularJS之directive指令渲染的顺序

阅读更多

https://stackoverflow.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://stackoverflow.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






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

  
  
  
  
  



  

    

    

  
  

    

    

  



{{log}}

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;
}

-

• 
• 大小: 213.6 KB

• 
• 大小: 117.8 KB

• 查看图片附件