angular.js - angularjs的加载编译机制

Question

首先说的当下的技术环境：angular1.6,ui-route,require，疑问：
1、ui-route加载的template和动态注册的controller谁先被编译执行？例如：我想获取template的#id的宽必须要$timeout?否则就出现undefine
2、自定义指令的compile是不是先于template加载?还是并行加载？
有点混乱，跪求解答，相关文章和解惑也跪谢！
附加题：{{}}会自动将类型转化为字符串吧？
谢谢，回答部分也非常感谢

Answer 1

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

La compilation HTML se déroule en trois phases :

1. $compile traverse le DOM et correspond aux directives.

   Si le compilateur constate qu'un élément correspond à une directive, alors la
   directive est ajoutée à la liste des directives qui correspondent à l'élément DOM
   . Un seul élément peut correspondre à plusieurs directives.

2. Une fois que toutes les directives correspondant à un élément DOM ont été identifiées, le
   compilateur trie les directives selon leur priorité.

   Les fonctions de compilation de chaque directive sont exécutées. Chaque fonction de compilation
   a la possibilité de modifier le DOM. Chaque fonction de compilation
   renvoie une fonction de lien. Ces fonctions sont composées en une fonction de lien
   "combinée", qui invoque la fonction
   lien renvoyée par chaque directive.

3. $compile lie le modèle à la portée en appelant la fonction de liaison combinée
   de l'étape précédente. Cela appellera à son tour la
   fonction de liaison des directives individuelles, enregistrant les auditeurs
   sur les éléments et en configurant des $watchs avec la portée comme chaque
   directive est configurée pour le faire.

Le résultat est une liaison en direct entre le scope et le DOM. Donc à ce stade, un changement dans un modèle sur la portée compilée sera reflété dans le DOM.

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

Answer 2

1. Je pense que la séquence devrait être comme ceci : chargez le modèle et accédez au contrôleur en même temps, initialisez les données dans le contrôleur, puis entrez dans l'étape $digest pour restituer le modèle. Par conséquent, vous risquez de ne pas obtenir la largeur du #id du modèle pendant le processus de chargement du contrôleur.
   Écrivez un $timeout qui exécutera le code dans le délai d'attente après la fin de $digest et déclenchera à nouveau $digest.

2. La phase de compilation des instructions personnalisées détermine en fait la structure du modèle. La phase de compilation peut modifier la structure du modèle. La phase de liaison prépare les données puis restitue le modèle.

S'il y a quelque chose qui ne va pas, corrigez-moi et discutez-en.