angular $compiler

Posted 2020-07-07 echo2016

directive是如何被compiled

html编译发生在三个阶段：

1.$compile遍历DOM节点匹配directives

如果compiler找到元素上的directive，directive就会被加入匹配DOM元素的directives list列表中，一个元素可以有多个directives

2.绑定在DOM元素上的所有directives一旦被确定，compiler会按优先级给directives排序

每个directive的compile函数都会被执行。每个compile函数都有一次改变DOM的机会。每个compile函数都返回link函数。这些函数调用每个directive返回的link函数构成组合链接函数

3.$compile通过调用上一步讲述的组合链接函数来链接scope和template。依次调用directives的link函数，给每个directive配置注册元素监听事件，设置scope的$watch监听器

 

var $compile = ...; // injected into your code
var scope = ...;
var parent = ...; // DOM element where the compiled template can be appended

var html = ‘<div ng-bind="exp"></div>‘;

// Step 1: parse HTML into DOM element
var template = angular.element(html);

// Step 2: compile the template
var linkFn = $compile(template);

// Step 3: link the compiled template with the scope.
var element = linkFn(scope);

// Step 4: Append to DOM (optional)
parent.appendChild(element);