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

Question

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

Answer 1

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

HTML 编译分三个阶段进行：

1. $compile 遍历 DOM 并匹配指令。

   如果编译器发现某个元素与某个指令匹配，则该
   指令将添加到与 DOM
   元素匹配的指令列表中。单个元素可能匹配多个指令。

2. 一旦识别出与 DOM 元素匹配的所有指令，
   编译器就会按优先级对指令进行排序。

   执行每个指令的编译函数。每个compile
   函数都有机会修改DOM。每个编译函数
   返回一个链接函数。这些函数组成一个
   “组合”链接函数，它调用每个指令返回的
   链接函数。

3. $compile 通过调用上一步中的组合
   链接函数将模板与范围链接起来。这反过来将调用各个指令的
   链接函数，在元素上注册侦听器
   ，并按照每个
   指令配置的范围设置 $watchs。

其结果是范围和 DOM 之间的实时绑定。所以此时，编译范围内模型的更改将反映在 DOM 中。

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

Answer 2

1. 我认为的顺序应该是这样的：加载template同时走controller，在controller里初始化数据，然后进入$digest阶段来render template。所以controller加载过程中你获取template的#id的宽就有可能得不到。
   写一个$timeout，会在$digest结束后执行timeout里面的代码，并再次触发一次$digest.

2. 自定义指令的compile阶段其实是确定template的结构，compile阶段可以更改template的结构，link阶段就是准备数据，然后render template。

如有不对，欢迎指正讨论。