angular.js - angularjs loading and compilation mechanism

Question

First of all, let’s talk about the current technical environment: angular1.6, ui-route, require. Questions:
1. Which one is compiled and executed first, the template loaded by ui-route or the dynamically registered controller? For example: If I want to get the width of the #id of the template, I must have $timeout? Otherwise, undefine
will appear. 2. Is the compile of the custom instruction loaded before the template? Or is it loaded in parallel?
It’s a bit confusing, so I’m begging for answers. I’d also like to thank you for the related articles and explanations!
Additional question: Will {{}} automatically convert the type into a string?
Thank you, thank you very much for the answer too

Answer 1

官方有详细解释,关于编译过程的介绍:

HTML compilation happens in three phases:

1. $compile traverses the DOM and matches directives.

   If the compiler finds that an element matches a directive, then the
   directive is added to the list of directives that match the DOM
   element.A single element may match multiple directives.

2. Once all directives matching a DOM element have been identified, the
   compiler sorts the directives by their priority.

   Each directive's compile functions are executed. Each compile
   function has a chance to modify the DOM. Each compile function
   returns a link function. These functions are composed into a
   "combined" link function, which invokes each directive's returned
   link function.

3. $compile links the template with the scope by calling the combined
   linking function from the previous step. This in turn will call the
   linking function of the inpidual directives, registering listeners
   on the elements and setting up $watchs with the scope as each
   directive is configured to do.

The result of this is a live binding between the scope and the DOM. So at this point, a change in a model on the compiled scope will be reflected in the DOM.

具体请题主详读 https://docs.angularjs.org/gu... 这篇关于compiler的文章.

Answer 2

1. I think the sequence should be like this: load the template and go to the controller at the same time, initialize the data in the controller, and then enter the $digest stage to render the template. Therefore, you may not get the width of the #id of the template during the controller loading process.
   Write a $timeout that will execute the code in the timeout after $digest ends and trigger $digest again.

2. The compile phase of custom instructions actually determines the structure of the template. The compile phase can change the structure of the template. The link phase prepares data and then renders the template.

If there is anything wrong, please correct me and discuss.