$compile，在Angular中即“编译”服务，它涉及到Angular应用的“编译”和“链接”两个阶段，根据从DOM树遍历Angular的根节点（ng-app）和已构造完毕的 \$rootScope对象，依次解析根节点后代，根据多种条件查找指令，并完成每个指令相关的操作（如指令的作用域，控制器绑定以及transclude等），最终返回每个指令的链接函数，并将所有指令的链接函数合成为一个处理后的链接函数，返回给Angluar的bootstrap模块，最终启动整个应用程序。
[TOC]
Angular的compileProvider
抛开Angular的MVVM实现方式不谈，Angular给前端带来了一个软件工程的理念－依赖注入DI。依赖注入从来只是后端领域的实现机制，尤其是javaEE的spring框架。采用依赖注入的好处就是无需开发者手动创建一个对象，这减少了开发者相关的维护操作，让开发者无需关注业务逻辑相关的对象操作。那么在前端领域呢，采用依赖注入有什么与之前的开发不一样的体验呢？
我认为，前端领域的依赖注入，则大大减少了命名空间的使用，如著名的YUI框架的命名空间引用方式，在极端情况下对象的引用可能会非常长。而采用注入的方式，则消耗的仅仅是一个局部变量，好处自然可见。而且开发者仅仅需要相关的“服务”对象的名称，而不需要知道该服务的具体引用方式，这样开发者就完全集中在了对象的借口引用上，专注于业务逻辑的开发，避免了反复的查找相关的文档。
前面废话一大堆，主要还是为后面的介绍做铺垫。在Angular中，依赖注入对象的方式依赖与该对象的Provider，正如小结标题的compileProvider一样，该对象提供了compile服务，可通过injector.invoke(compileProvider.$get,compileProvider)函数完成compile服务的获取。因此，问题转移到分析compileProvider.\$get的具体实现上。
compileProvider.\$get this.\$get = ['\$injector', '\$parse', '\$controller', '\$rootScope', '\$http', '\$interpolate', function(\$injector, \$parse, \$controller, \$rootScope, \$http, \$interpolate) { ... return compile; }
上述代码采用了依赖注入的方式注入了\$injector,\$parse,\$controller,\$rootScope,\$http,\$interpolate五个服务，分别用于实现“依赖注入的注入器（\$injector），js代码解析器（\$parse），控制器服务（\$controller）,根作用域（\$rootScope）,http服务和指令解析服务”。compileProvider通过这几个服务单例，完成了从抽象语法树的解析到DOM树构建，作用域绑定并最终返回合成的链接函数，实现了Angular应用的开启。
\$get方法最终返回compile函数，compile函数就是\$compile服务的具体实现。下面我们深入compile函数：
function compile(\$compileNodes, maxPriority) { var compositeLinkFn = compileNodes(\$compileNodes, maxPriority); return function publicLinkFn(scope, cloneAttachFn, options) { options = options || {}; var parentBoundTranscludeFn = options.parentBoundTranscludeFn; var transcludeControllers = options.transcludeControllers; if (parentBoundTranscludeFn && parentBoundTranscludeFn.$$boundTransclude) { parentBoundTranscludeFn = parentBoundTranscludeFn.$$boundTransclude; } var $linkNodes; if (cloneAttachFn) { $linkNodes = $compileNodes.clone(); cloneAttachFn($linkNodes, scope); } else { $linkNodes = $compileNodes; } _.forEach(transcludeControllers, function(controller, name) { $linkNodes.data('$' + name + 'Controller', controller.instance); }); $linkNodes.data('$scope', scope); compositeLinkFn(scope, $linkNodes, parentBoundTranscludeFn); return $linkNodes; }; }
首先，通过compileNodes函数，针对所需要遍历的根节点开始，完成指令的解析，并生成合成之后的链接函数，返回一个publicLinkFn函数，该函数完成根节点与根作用域的绑定，并在根节点缓存指令的控制器实例，最终执行合成链接函数。
合成链接函数的生成
通过上一小结，可以看出\$compile服务的核心在于compileNodes函数的执行及其返回的合成链接函数的执行。下面，我们深入到compileNodes的具体逻辑中去：
function compileNodes($compileNodes, maxPriority) { var linkFns = []; _.times($compileNodes.length, function(i) { var attrs = new Attributes($($compileNodes[i])); var directives = collectDirectives($compileNodes[i], attrs, maxPriority); var nodeLinkFn; if (directives.length) { nodeLinkFn = applyDirectivesToNode(directives, $compileNodes[i], attrs); } var childLinkFn; if ((!nodeLinkFn || !nodeLinkFn.terminal) && $compileNodes[i].childNodes && $compileNodes[i].childNodes.length) { childLinkFn = compileNodes($compileNodes[i].childNodes); } if (nodeLinkFn && nodeLinkFn.scope) { attrs.$$element.addClass('ng-scope'); } if (nodeLinkFn || childLinkFn) { linkFns.push({ nodeLinkFn: nodeLinkFn, childLinkFn: childLinkFn, idx: i }); } }); // 执行指令的链接函数 function compositeLinkFn(scope, linkNodes, parentBoundTranscludeFn) { var stableNodeList = []; _.forEach(linkFns, function(linkFn) { var nodeIdx = linkFn.idx; stableNodeList[linkFn.idx] = linkNodes[linkFn.idx]; }); _.forEach(linkFns, function(linkFn) { var node = stableNodeList[linkFn.idx]; if (linkFn.nodeLinkFn) { var childScope; if (linkFn.nodeLinkFn.scope) { childScope = scope.$new(); $(node).data('$scope', childScope); } else { childScope = scope; } var boundTranscludeFn; if (linkFn.nodeLinkFn.transcludeOnThisElement) { boundTranscludeFn = function(transcludedScope, cloneAttachFn, transcludeControllers, containingScope) { if (!transcludedScope) { transcludedScope = scope.$new(false, containingScope); } var didTransclude = linkFn.nodeLinkFn.transclude(transcludedScope, cloneAttachFn, { transcludeControllers: transcludeControllers, parentBoundTranscludeFn: parentBoundTranscludeFn }); if (didTransclude.length === 0 && parentBoundTranscludeFn) { didTransclude = parentBoundTranscludeFn(transcludedScope, cloneAttachFn); } return didTransclude; }; } else if (parentBoundTranscludeFn) { boundTranscludeFn = parentBoundTranscludeFn; } linkFn.nodeLinkFn( linkFn.childLinkFn, childScope, node, boundTranscludeFn ); } else { linkFn.childLinkFn( scope, node.childNodes, parentBoundTranscludeFn ); } }); } return compositeLinkFn; }
代码有些长，我们一点一点分析。