AngularJS具有五大核心特性:MVC设计、模块化、指令系统、数据双向绑定、依赖注入。所以理解angualrjs指令是如何工作有利于深入理解angularjs。

1. 指令的加载阶段

此阶段加载anguale.js,查找ng-app,确定angularjs应用范围。

2. compile编译阶段

此阶段遍历DOM,查找所有的指令,保存到angularjs所指定的存储区中,根据指令中的templatereplacetransclue转换DOM结构,如果存在compile函数则调用,一般不再compile做任何处理。

3. link编译阶段

此阶段对每一条指令运行link函数,link函数一般用来操作DOM,绑定事件监听器。

4. 归纳:

  1. compile函数用来对模板自身进行转换,而link函数负责在模型和视图之间进行动态关联;
  2. 作用域在链接阶段才会被绑定到编译之后的link函数上;
  3. compile函数仅仅在编译阶段运行一次,而对于指令的每个实例,link函数都会执行一次;
  4. compile可以返回preLink和postLink函数,而link函数只会返回postLink函数;
  5. 如果需要修改DOM结果,应该在postLink中来做这件事,而如果在preLink中做这件事会导致错误,大多数我们只需要编写link函数即可;