美文网首页我爱编程
angular生命周期

angular生命周期

作者: 才気莮孒 | 来源:发表于2017-06-29 00:08 被阅读0次

AngularJS应用启动之前,它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接,作用域会同HTML进行绑定。这个过程包含了两个阶段!

编译阶段:

在编译的阶段,angularjs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中,有可能一层套着一层,一直延深处遍历。

一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个函数没被返回(return)之前我们可以对编译后的DOM树进行修改。如果设置了compile函数,

说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

本质上,当我们设置了link选项,实际上是创建了一个postLink()

链接函数,以便compile() 函数可以定义链接函数。

编译函数(compile)负责对模板DOM进行转换。

链接函数(link)负责将作用域和DOM进行链接。

注:compile和link选项是互斥的。如果同时设置了这两个选项,那么会把compile所返回的函数当作链接函数,而link选项本身则会被忽略。compile: function(tEle, tAttrs, transcludeFn) {

var tplEl = angular.element('

' +'

' +'');

var h2 = tplEl.find('h2');

h2.attr('type', tAttrs.type);

h2.attr('ng-model', tAttrs.ngModel);

h2.val("hello");

tEle.replaceWith(tplEl);

return function(scope, ele, attrs) {

// 连接函数

};

}

在最后return一个闭包函数,其实就是我们的所说的link函数。平常我们这样定义的compile函数很少用,多种写法,因为写起来比较复杂。

链接阶段:

用link函数创建可以操作DOM的指令。

链接函数是可选的。如果定义了编译函数,它会返回链接函数,因此当两个函数都定义了时,编译函数会重载链接函数。(覆盖);

// require 'SomeController',

link: function(scope, element, attrs, SomeController) {

// 在这里操作DOM,可以访问required指定的控制器

}

如果require选项提供了一个指令数组,第四个参数会是一个由每个指令所对应的控制器组成的数组。

总结:

(1)compile函数的作用就是对指令的模板函数进行转换。

(2)link函数是在模型和视图之间建立关联,包括在元素上注册监听事件。

(3)scope在连接阶段才被绑定到元素上,所以在compile阶段操作scope回报错误。

(4)一般情况下,我们只写link函数就够了。

(5)请注意,如果你编写自定义的compile函数,则自定义的link函数无效应为compile会返回一个link函数

相关文章

  • angular生命周期

    大纲 1、angular生命周期是什么2、生命周期钩子分类3、Angular 2 指令生命周期钩子的作用及调用顺序...

  • angular中的生命周期

    生命周期 1、Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把...

  • angular6.x--生命周期

    按照生命周期执行的先后顺序,Angular生命周期接口如下所示 生命周期顺序简写在Angular通过构造函数创建组...

  • 12.《Angular生命周期》

    一、生命周期钩子 每个组件都有一个被 Angular 管理的生命周期。Angular 创建它,渲染它,创建并渲染它...

  • Angular 2+ 的组件生命周期

    参考资料: angular 2.0 从0到1 -> #Angular 2的组件生命周期

  • angular 钩子

    angular 钩子ngOnInit是 Angular 组件生命周期中的一个钩子,Angular 中的所有钩子和调...

  • Angular2生命周期钩子函数

    Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴...

  • Angular2生命周期钩子函数

    Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴...

  • Angular更新机制(一):Angular的生命周期

    Angular更新机制(一):Angular的生命周期 了解Angular的更新机制之前,首先需要了解Angula...

  • Angular生命周期解析

    每个组件都有一个被Angular管理的生命周期,Angular提供了生命周期钩子,把这些关键生命时刻暴露出来,赋予...

网友评论

    本文标题:angular生命周期

    本文链接:https://www.haomeiwen.com/subject/knbpcxtx.html