The compile API looks like so:
compile: function compile( tElement, tAttributes ) { ... }
Often the parameters are prefixed with 't' to signify the elements and attributes provided are those of the source template, rather than that of t<span style="white-space:pre"> </span>he instance.
//通常参数带有前缀't',是为了表示元素和属性是由源模板提供的,而不是实例模板
Each directive's compile function is only called once, when Angular bootstraps.Officially, this is the place to perform (source) template manipula<span style="white-space:pre"> </span>tions that do not involve scope or data binding.
// 1)当Angular启动时,每个指令的编译函数只被调用一次;
2)官方式说法是,此阶段执行源模板操作,并不包含作用域和数据的 绑定。
The controller API involves:
controller: function( $scope, $element, $attrs, $transclude ) { ... }
Each directive's controller function is called whenever a new related element is instantiated.
//每当一个新的相关标签元素被实例化都回调用每个指令的控制器函数
控制器中通常做以下事情:
1)Defines controller logic (methods) that may be shared between controllers.
定义控制器的逻辑(方法),这些逻辑方法可能在控制器之间共享
2)Initiates scope variables.
开始作用域变量
The pre-link API looks like so:
function preLink( scope, element, attributes, controller ) { ... }
Each directive's pre-link function is called whenever a new related element is instantiated.The pre-link function is rarely used, but can be usefu<span style="white-space:pre"> </span>l in special scenarios; for example, when a child controller registers itself with the parent controller, but the registration has to be in a pare<span style="white-space:pre"> </span>nt-then-child fashion (ngModelController does things this way).
即:1)每当一个新的相关元素被实例化都会调用指令的pre-link函数;
2)pre-link函数很少被用,但是在特殊情景时是有用的;例如:当一个子控制器注册到父控制器,但注册必须是以一个parent-then-child样式的时候(ngModelC<span style="white-space:pre"> </span>ontroller的执行就是以这种方式)
The post-link API is similar to that of the pre-link function:
function postLink( scope, element, attributes, controller ) { ... }
链接完成后通常做一下事情:
1)Manipulate DOM (rendered, and thus instantiated) elements.
操作DOM
2)Attach event handlers.
附着事件处理函数
<span style="white-space:pre"> </span> 3)Inspect child elements.
<span style="white-space:pre"> </span>检查子元素
<span style="white-space:pre"> </span>4)Set up observations on attributes.
<span style="white-space:pre"> </span>设置对属性的监测
5)Set up watches on the scope.
设置对作用域的监测AngularJS的directive指令执行流程学习
最新推荐文章于 2018-08-14 23:37:20 发布
本文深入解析Angular中的指令生命周期,包括编译、控制器、预链接及后链接等阶段的功能与使用场景。介绍了各阶段的主要任务,如编译阶段的模板操作、控制器阶段的逻辑定义与作用域初始化、预链接阶段的特殊用途以及后链接阶段的DOM操作和事件绑定。
521

被折叠的 条评论
为什么被折叠?



